CSS vertical-align
Właściwość vertical-align służy do ustawiania pionowego wyrównania elementu względem linii tekstu albo komórki tabeli. W pytaniach egzaminacyjnych najczęściej kojarzy się ją z zapisem:
p {
vertical-align: middle;
}
Wartość middle oznacza wyrównanie w pionie do środka.
Najważniejsze wartości
baseline— wyrównanie do linii bazowej tekstu, wartość domyślna,top— wyrównanie do góry,middle— wyrównanie do środka w pionie,bottom— wyrównanie do dołu,sub— indeks dolny,super— indeks górny.
Przykład użycia
img {
vertical-align: middle;
}
Taki zapis może wyrównać obrazek względem sąsiadującego tekstu w jednej linii.
Przykład dla komórki tabeli:
td {
vertical-align: middle;
}
Tutaj zawartość komórki zostanie ustawiona pionowo na środku.
Ważna uwaga praktyczna
vertical-align nie działa tak samo jak text-align. Właściwość text-align: center wyrównuje tekst poziomo, czyli do środka w lewo-prawo. Natomiast vertical-align: middle dotyczy wyrównania pionowego.
Trzeba też pamiętać, że vertical-align nie centruje dowolnego elementu blokowego na stronie. Do pionowego centrowania całych bloków częściej używa się dziś Flexboxa, np. align-items: center.