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.
html
css
font-awesome
Paweł
źródło
źródło
Odpowiedzi:
Po prostu musiałem to zrobić sam, musisz to zrobić na odwrót.
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
dla działającego przykładu zobacz JsFiddle
źródło
Używam ikon obok tekstu w 99% przypadków, więc dokonałem zmiany globalnie:
Dodaj 3x, 4x itd. Do tej samej definicji, ile potrzeba.
źródło
vertical-align: middle;
- może coś mi tu brakuje. Proszę wyjaśnić, jeśli tak.vertical-align: middle
, mają na myśli, jeśli używaszblock
elementów . Jeśli używaszinline
,inline-block
lubtable-cell
, powinno być dobrze. MDN:vertical-align
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:
źródło
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: 1
bez wymagania!important
dla właściwości: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.
źródło
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
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
skrzypce
https://jsfiddle.net/3bpjvof2/
źródło
Najprostszym sposobem jest ustawienie właściwości css wyrównania do pionu na środek
źródło
.svg-inline--fa
dla FontAwesome 5fa-clock
w klasie?To działało dla mnie dobrze.
źródło
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.
Pamiętaj, że ikona jest w rzeczywistości
svg
grafiką.Próbny
źródło
Dla osób używających Bootstrap 4 jest proste:
źródło
Inną opcją dostrajania wysokości linii ikony jest użycie procentu
vertical-align
wł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.źródło
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:
Nowy CSS:
źródło
vertical-align: middle
ikonę i tekst. W ten sposób nie przyjmujesz założeń dotyczących wysokości ikony i jest mniej CSS.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.źródło
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.
Przykład: JsFiddle
źródło
Wystarczy zdefiniować
vertical-align
właściwość dla elementu ikony:źródło