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>

coyotetop

<p><img src="http://4programmers.net/bin/coyote.jpg" width="57" height="90" alt="coyote" style="vertical-align: middle">middle<p>

coyotemiddle

<p><img src="http://4programmers.net/bin/coyote.jpg" width="57" height="90" alt="coyote" style="vertical-align: bottom;">bottom<p>

coyotebottom

<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

Polecenia pokrewne

* [[css/text-align]], [[css/line-height]]

Odpowiednik html

* [[(x)html/atrybuty/valign]]

Wersja specyfikacji

* CSS 1 * CSS 2 * CSS 2.1

Wsparcie przeglądarek

* Wszystkie nowoczesne przeglądarki
CSS

0 komentarzy