CSS

Vertical-align

  • 2007-06-18 13:23
  • 0 komentarzy
  • 2313 odsłon
  • Oceń ten tekst jako pierwszy
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


Odpowiednik html


Wersja specyfikacji


Wsparcie przeglądarek


  • Wszystkie nowoczesne przeglądarki