`vertical-align` în CSS

Aliniază pe verticală elementele inline (iconițe, imagini) față de textul din jur și conținutul celulelor de tabel.

Sintaxă CSS

vertical-align: baseline;
vertical-align: middle;
vertical-align: top;
vertical-align: -0.125em;
vertical-align: super;

Ce face `vertical-align`

vertical-align funcționează doar în două situații: la elemente inline sau inline-block (aliniere față de rândul de text) și la celule de tabel (aliniere a conținutului în celulă).

Nu centrează un bloc în interiorul altui bloc. Pentru asta folosești Flexbox sau Grid (align-items: center).

Imaginile sunt inline implicit și stau pe linia de bază a textului, de aceea sub o imagine apare adesea un spațiu mic. vertical-align: middle (sau display: block) elimină acel spațiu.

Valori uzuale

Valoare	Descriere
`baseline`	Pe linia de bază a textului părinte (implicit).
`middle`	Mijlocul elementului la jumătatea înălțimii literelor mici ale părintelui.
`top / bottom`	La marginea de sus / de jos a rândului întreg.
`text-top / text-bottom`	La marginea de sus / de jos a fontului părintelui.
`sub / super`	Ca indice / exponent.
`<lungime> / <procent>`	Ridică (pozitiv) sau coboară (negativ) față de linia de bază.

Exemple

Exemplul 1: Iconiță SVG aliniată cu textul unui link

O valoare negativă mică așază iconița la nivelul literelor.

.link-telefon svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  margin-right: 0.25em;
}

Efect vizual în browser

Iconița de telefon stă la aceeași înălțime cu textul „0722 123 456”, nu ridicată deasupra lui.

Exemplul 2: Conținut aliniat sus în celulele unui tabel

În tabele, celulele sunt centrate vertical implicit; pentru descrieri de lungimi diferite e mai clar sus.

.tabel-orar td {
  vertical-align: top;
  padding: 8px;
}