vertical-align
Wyrównuje w pionie elementy liniowe i zawartość komórek tabeli.
- Wartość domyślna
baseline- Dziedziczona
- Nie
- Animowalna
- tak, dla długości i procentów
- Dotyczy
- elementy liniowe i komórki tabeli
- JavaScript
element.style.verticalAlign = "middle"
Przykład
#.icon {
width: 20px;
height: 20px;
vertical-align: -4px;
}<p style="margin: 0; font-size: 16px;">
<img class="icon" src="/collections/nextjs.png" alt="" width="20" height="20" style="vertical-align: -4px;">
Next.js w nowym module kursu
</p>Definicja i zastosowanie
#Właściwość vertical-align działa w dwóch kontekstach. W elementach liniowych, takich jak ikony czy obrazki w tekście, ustawia je względem linii tekstu: do linii bazowej, na środek, do góry. W komórkach tabeli wyrównuje całą zawartość komórki w pionie.
Nie służy do wyśrodkowywania bloków w kontenerze. To częste nieporozumienie: vertical-align: middle na zwykłym <div> nic nie zmieni. Do tego używa się Flexboxa lub Grida.
Klasyczne zastosowanie to ikona obok tekstu (middle) oraz usuwanie odstępu pod obrazkiem liniowym, który przylega do linii bazowej (vertical-align: top lub display: block).
Składnia
#vertical-align: baseline | middle | top | bottom | text-top | text-bottom | sub | super | <długość> | <procent>;Wartości
#Wartości w praktyce
#baseline
.demo { vertical-align: baseline; }middle
.demo { vertical-align: middle; }top
.demo { vertical-align: top; }super
.demo { vertical-align: super; }-6px
.demo { vertical-align: -6px; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Do wyśrodkowania bloku w pionie użyj Flexboxa albo Grida, nie
vertical-align. - Mały odstęp pod obrazkiem wewnątrz bloku znika po ustawieniu obrazkowi
display: blocklubvertical-align: top.
Powiązane hasła
#- line-heightUstawia wysokość linii tekstu, czyli odstęp między wierszami.
- text-alignWyrównuje tekst w poziomie: do lewej, do prawej, do środka lub do obu krawędzi.
- align-itemsWyrównuje elementy na osi poprzecznej kontenera flex lub grid.
- displayUstala, jak element zachowuje się w układzie strony i jak układa swoje dzieci.
Widzisz błąd albo brakuje przykładu? Napisz do nas.