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

231

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.

Paweł
źródło
2
Jesteś bogiem Poważnie, spędziłem dziś 2 godziny na tym, twoje rozwiązanie BYŁO DALEJ najczystsze. Nie musisz niczego kodować.
Chuck
takie podejście jest łatwiejsze
Raveen Beemsingh

Odpowiedzi:

304

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

andxyz
źródło
1
tak, to lepsze rozwiązanie, dzięki. Nadal wydaje się wymagać wysokości linii, chociaż jsfiddle.net/paulftw/F3KyK/41
Paul
1
Zaktualizowałem twój jsfiddle pod kątem tego, jak bym to zrobił. Użyłem rozmiaru czcionki dla ikony zamiast 2x. jsfiddle.net/3GMjp/1
andxyz
W pierwszym fragmencie kodu znacznik początkowy <span> nie odpowiada znacznikowi końcowemu </i>.
jzacharuk
Nie działa z niektórymi ikonami. fa-angle-left example
steakchaser
ważne jest, aby zdawać sobie sprawę, że dołączenie plików fontawesome js może również modyfikować wygląd. Moja ikona była za daleko na górze, usunąłem włączenie js, aby zobaczyć, co się stanie, a teraz jest zbyt daleko na dole
lucidbrot
53

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.

Rush Frisby
źródło
7
Moim zdaniem powinna to być zaakceptowana odpowiedź, ponieważ jest to zdecydowanie najprostsze rozwiązanie, chyba że brakuje mi czegoś w pierwotnym pytaniu. Dzięki @rushonerok! Nie jestem pewien, dlaczego niektórzy twierdzą, że nie należy używać vertical-align: middle;- może coś mi tu brakuje. Proszę wyjaśnić, jeśli tak.
Kendall
1
@Kendall Roth Myślę, że kiedy ludzie mówią, aby nie używać vertical-align: middle, mają na myśli, jeśli używasz blockelementów . Jeśli używasz inline, inline-blocklub table-cell, powinno być dobrze. MDN:vertical-align
rinogo,
Działa jak urok! Dziękuję: D
Mohammed A. Fadil
37

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;
}
Paweł
źródło
2
Co jeśli twój pojemnik jest większy niż 50 pikseli? Wtedy to nie zadziała ... Mam treść, która zmienia rozmiar i powinna być wyśrodkowana ikona w środku ... jakiś pomysł na ten temat?
Slaven Tomac,
24

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.

czysta fuzja
źródło
16

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/

Hastig Zusammenstellen
źródło
1
Może to wyśrodkować ikonę w pionie w div, nie tylko w wierszu tekstu. Działa świetnie!
Sean the Bean
@ ktokolwiek próbuje to edytować - to jest na ogół mój styl układu dla odpowiedzi. Uważam, że dzięki temu jest bardziej czytelny / zrozumiały i pozwala ludziom lepiej wiedzieć, dokąd zmierzają, zanim klikną link. W przypadku adresu URL hostowanego przez FA niektóre osoby mają zwyczaj wyróżniać link, aby go skopiować, dlatego jest napisany w całości. Linki jsfiddle mają nagłówek, aby lepiej podzielić stronę, w przeciwnym razie łatwiej jest przeoczyć, a odpowiedzi mogą wyglądać na zagracone.
Hastig Zusammenstellen
11

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

i.fa {
    vertical-align: middle;
}
ajaali
źródło
3
.svg-inline--fadla FontAwesome 5
darylknight
@darylknight, co to znaczy? Jak mam to aktywować / używać? Dodać coś po moim fa-clockw klasie?
Prof. Falken,
5

To działało dla mnie dobrze.

i.fa {
  line-height: 100%;
}
Tomek
źródło
3

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

mriiiron
źródło
2

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

<span class="align-middle"><i class="fas fa-camera"></i></span>
nscherzer
źródło
Nie ma to zastosowania jako wyrównanie w pionie: środek, który jest stosowany przez tę klasę, jest kierowany tylko na tabele.
Lucas Manzke
1

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
}
Arian Acosta
źródło
1

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;
}
Webster Gordon
źródło
4
Vertical-align nie robi nic na elementach blokowych, to działa tylko na rolkach lub komórek tabeli elementów.
cimmanon
Rozumiem, ustawienie linii-wysokość = wysokość pojemnika i przestawianie rzeczy pozostało skuteczne i wymaga mniej pisania. Oto zaktualizowane skrzypce ze zmniejszonym hałasem: jsfiddle.net/F3KyK/7
Paul
Lepiej po prostu ustawić vertical-align: middleikonę i tekst. W ten sposób nie przyjmujesz założeń dotyczących wysokości ikony i jest mniej CSS.
Maros,
0

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.

ADP
źródło
0

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

Ian Donahue
źródło
0

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

div .icon {
   vertical-align: middle;
}
ali6p
źródło