Vertical-align
vertical-align - ustala pionowe położenie elementu. Działa w elemencie typu inline lub komórce tabeli.
Aby wyśrodkować bloki w pionie, należy skorzystać z właściwości Line-height lub potraktować je jako table - zmieniając ich Display na table oraz table-cell. Wtedy zadziała na nich właściwość vertical-align.
Możliwe wartości:
- baseline (domyślna)
- middle - pionowe wyśrodkowanie elementu
- top - wyrównanie do góry elementu
- bottom - wyrównanie do dołu elementu
- text-top - wyrównanie do górnej granicy tekstu
- text-bottom - wyrównanie do dolnej granicy tekstu
- super - umieszczenie elementu nad tekstem (indeks górny)
- sub - umieszczenie elementu pod tekstem (indeks dolny)
- jednostki miary
- Inherit
Przykład użycia:
<p><img src="http://4programmers.net/bin/coyote.jpg" width="57" height="90" alt="coyote" style="vertical-align: top">top<p>
top
<p><img src="http://4programmers.net/bin/coyote.jpg" width="57" height="90" alt="coyote" style="vertical-align: middle">middle<p>
middle
<p><img src="http://4programmers.net/bin/coyote.jpg" width="57" height="90" alt="coyote" style="vertical-align: bottom;">bottom<p>
bottom
<p>tekst <span style="vertical-align: 20px;">20px</span> tekst<p>
tekst 20px tekst
<p>Tekst <span style="vertical-align: super; font-weight: bold;">super</span> tekst</p>
Tekst super tekst
<p>Tekst <span style="vertical-align: sub; font-weight: bold;">sub</span> tekst</p>
Tekst sub tekst