Jak wyśrodkować tekst pionowo za pomocą dużej ikony niesamowitej czcionki?

Powiedzmy, że mam przycisk bootstrap z niesamowitą czcionką ikoną i tekstem:

<div>
    <i class='icon icon-2x icon-camera'></i>
    hello world
</div>

Jak sprawić, by tekst wyglądał na wyśrodkowany w pionie? Tekst jest teraz wyrównany do dolnej krawędzi ikony: http://jsfiddle.net/V7DLm/1/

EDYCJA: Mam możliwe rozwiązanie : http://jsfiddle.net/CLdeG/1/, ale wydaje się nieco hacky - wprowadza dodatkowy tag p, używa pull-left i display: table. Może ktoś może zaproponować łatwiejszy sposób.

Po prostu musiałem to zrobić sam, musisz to zrobić na odwrót.

• nie baw się wyrównaniem tekstu w pionie
• baw się z pionowym wyrównaniem ikony niesamowitej czcionki

<div>
  <span class="icon icon-2x icon-camera" style=" vertical-align: middle;"></span>
  <span class="my-text">hello world</span>
</div>

Oczywiście nie można używać stylów wbudowanych i kierować nimi za pomocą własnej klasy css. Ale działa to w sposób kopiowania i wklejania.

Zobacz tutaj: Pionowe wyrównanie tekstu i ikony w przycisku

Gdyby to zależało ode mnie, nie użyłbym ikony-2x. I po prostu sam określ rozmiar czcionki, jak poniżej

<div class='my-fancy-container'>
    <span class='my-icon icon-file-text'></span>
    <span class='my-text'>Hello World</span>
</div>

.my-icon {
    vertical-align: middle;
    font-size: 40px;
}

.my-text {
    font-family: "Courier-new";
}

.my-fancy-container {
    border: 1px solid #ccc;
    border-radius: 6px;
    display: inline-block;
    margin: 60px;
    padding: 10px;
}

dla działającego przykładu zobacz JsFiddle

Używam ikon obok tekstu w 99% przypadków, więc dokonałem zmiany globalnie:

.fa-2x {
  vertical-align: middle;
}

Dodaj 3x, 4x itd. Do tej samej definicji, ile potrzeba.

Po rozważeniu wszystkich sugerowanych opcji, najczystszym rozwiązaniem wydaje się ustawienie wysokości linii i wyrównanie w pionie wszystkiego:

Zobacz Jsfiddle Demo

CSS:

div {
    border: 1px solid #ccc;
    display: inline-block;
    height: 50px;
    margin: 60px;
    padding: 10px;
}
#text, #ico {
    line-height: 50px;
}

#ico {
    vertical-align: middle;
}

jeśli sprawy się nie line-height: inherit;układają , wystarczy CSS na określonych elementach i.fa, które mają problemy z wyrównaniem, wystarczy.

Możesz również w pełni wykorzystać globalne rozwiązanie, które ze względu na nieco wyższą specyfikę CSS zastąpi regułę .fa FontAwesome, która określa line-height: 1bez wymagania !importantdla właściwości:

i.fa {
  line-height: inherit;
}

Tylko upewnij się, że powyższe globalne rozwiązanie nie powoduje żadnych innych problemów w miejscach, w których możesz również używać ikon FontAwesome.

opcja flexbox - niesamowita czcionka 4.7 i niższa

Hostowany URL FA 4.x - https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

div {
  display: inline-flex; /* make element size relative to content */
  align-items: center; /* vertical alignment of items */
  line-height: 40px; /* vertically size by height, line-height or padding */
  padding: 0px 10px; /* horizontal with padding-l/r */
  border: 1px solid #ccc;
}

/* unnecessary styling below, ignore */
body {display: flex;justify-content: center;align-items: center;height: 100vh;}div i {margin-right: 10px;}div {background-color: hsla(0, 0%, 87%, 0.5);}div:hover {background-color: hsla(34, 100%, 52%, 0.5);cursor: pointer;}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
    <i class='fa fa-2x fa-camera'></i>
    hello world
</div>

skrzypce

http://jsfiddle.net/Hastig/V7DLm/180/

za pomocą flex i font awesome 5

Hostowany URL FA 5.x - https://use.fontawesome.com/releases/v5.0.8/js/all.js

div {
  display: inline-flex; /* make element size relative to content */
  align-items: center; /* vertical alignment of items */
  padding: 3px 10px; /* horizontal vertical position with padding */
  border: 1px solid #ccc;
}
.svg-inline--fa { /* target all FA icons */
  padding-right: 10px;
}
.icon-camera .svg-inline--fa { /* target specific icon */
  font-size: 50px;
}
/* unnecessary styling below, ignore */
body {display: flex;justify-content: center;align-items: center;height: 100vh; flex-direction: column;}div{margin: 10px 0;}div {background-color: hsla(0, 0%, 87%, 0.5);}div:hover {background-color: hsla(212, 100%, 63%, 1);cursor: pointer;}

<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div class="icon-camera">
    <i class='fas fa-camera'></i>
    hello world
</div>
<div class="icon-clock">
    <i class='fas fa-clock'></i>
    hello world
</div>

skrzypce

https://jsfiddle.net/3bpjvof2/

Najprostszym sposobem jest ustawienie właściwości css wyrównania do pionu na środek

i.fa {
    vertical-align: middle;
}

To działało dla mnie dobrze.

i.fa {
  line-height: 100%;
}

Spróbuj ustawić swoją ikonę jako height: 100%

Nie musisz nic robić z opakowaniem (powiedz, twój przycisk).

Wymaga to Font Awesome 5. Nie jestem pewien, czy działa dla starszych wersji FA.

.wrap svg {
    height: 100%;
}

Pamiętaj, że ikona jest w rzeczywistości svggrafiką.

Próbny

Dla osób używających Bootstrap 4 jest proste:

<span class="align-middle"><i class="fas fa-camera"></i></span>

Inną opcją dostrajania wysokości linii ikony jest użycie procentu vertical-alignwłaściwości. Zwykle 0% jest na dole, a 100% na górze, ale można użyć wartości ujemnych lub więcej niż stu, aby stworzyć ciekawe efekty.

.my-element i.fa {
    vertical-align: 100%; // top
    vertical-align: 50%; // middle
    vertical-align: 0%; // bottom
}

Owinąłbym tekst, abyś mógł skierować go osobno. Teraz, jeśli unosisz obie i lewą, możesz użyć wysokości linii, aby kontrolować pionowe odstępy. Ustawienie go na tę samą wysokość co (30 pikseli) spowoduje wyrównanie do środka. Zobacz tutaj .

Nowy znacznik:

 <div>
    <i class='icon icon-2x icon-camera'></i>
    <span id="text">hello world</span>
</div>

Nowy CSS:

div {
    border: 1px solid #ccc;
    height: 30px;
    margin: 60px;
    padding: 4px;
    vertical-align: middle;
}
i{
    float: left;
}
#text{
    line-height: 30px;
    float: left;
}

Podczas korzystania z Flexboksa pionowe wyrównanie niesamowitych czcionek obok tekstu może być bardzo trudne. Próbowałem marginesów i wypełnienia, ale to poruszyło wszystkie przedmioty. Próbowałem różnych wyrównań elastyczności, takich jak środek, początek, linia bazowa itp., Ale bezskutecznie. Najłatwiejszym i najczystszym sposobem na dostosowanie tylko ikony było ustawienie, aby zawierała div do position: relative; top: XX;To zrobiło to doskonale.

To pytanie zostało zadane lata temu. Myślę, że technologia nieco się zmieniła, a kompatybilność przeglądarki jest znacznie lepsza. Możesz użyć wyrównania w pionie, ale uważam, że niektóre z nich są mniej skalowalne i mniej wielokrotnego użytku. Polecam schematu flexbox podejście.

Oto ten sam przykład, którego użył oryginalny plakat, ale z Flexbox. Stylizuje pojedynczy element. Jeśli rozmiar przycisku zmieni się z jakiegokolwiek powodu, nadal będzie wyśrodkowany w pionie i poziomie.

.button {
    border: 1px solid #ccc;
    height: 40px;
    margin: 60px;
    padding: 4px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

Przykład: JsFiddle

Wystarczy zdefiniować vertical-alignwłaściwość dla elementu ikony:

div .icon {
   vertical-align: middle;
}