Wertykalne wyrównanie (vertical-align) w CSS3 jest właściwością używaną do określenia wyrównania elementów wzdłuż osi pionowej ich kontenera. Jest szczególnie przydatne w kontekście linii bazowej tekstu, obrazów w tekście lub w tabelach. Jednak jego zastosowanie nie ogranicza się tylko do tych przypadków. W połączeniu z innymi technikami, takimi jak Flexbox czy Grid, vertical-align może być używane do osiągnięcia zaawansowanych układów wizualnych.
Przykład wykorzystania vertical-align w tabeli
W poniższym przykładzie zobaczymy, jak vertical-align może być użyte do wyrównania tekstu w komórkach tabeli względem siebie.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykład wykorzystania vertical-align w CSS3</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
text-align: left;
}
.align-bottom {
vertical-align: bottom;
}
.align-top {
vertical-align: top;
}
</style>
</head>
<body>
<table>
<tr>
<th>Nagłówek 1</th>
<th>Nagłówek 2</th>
</tr>
<tr>
<td>Wiersz 1, Komórka 1</td>
<td class="align-bottom">Wiersz 1, Komórka 2 (Dół)</td>
</tr>
<tr>
<td class="align-top">Wiersz 2, Komórka 1 (Góra)</td>
<td>Wiersz 2, Komórka 2</td>
</tr>
</table>
</body>
</html>
Podsumowanie
vertical-align jest przydatną właściwością w CSS3, umożliwiającą kontrolę nad wertykalnym wyrównaniem elementów, szczególnie w kontekście tabel i linii tekstu. Jednakże, dla bardziej złożonych układów i wyrównań, nowoczesne technologie webowe takie jak Flexbox i Grid oferują większą elastyczność i kontrolę nad układem. Wybór metody zależy od konkretnego przypadku użycia i wymagań projektowych.
Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video WebDeveloper w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.