Przejdź do treści

CSS / Pozycjonowanie

Ustawienie {FLOAT, VERTICAL-ALIGN}

Jak ustawić obrazek (grafikę, zdjęcie) lub dowolny inny element po lewej bądź po prawej stronie tekstu? Jak ustawić element na górze, na środku lub na dole innego elementu? Jak stworzyć indeks górny i dolny za pomocą CSS?

Ustawienie w poziomie

selektor { float: sposób }

Polecenia nie można zastosować do elementów pozycjonowanych absolutnie.

Selektorem może być praktycznie dowolny znacznik, który nie został wypozycjonowany absolutnie [zobacz: Wstawianie stylów].

Natomiast jako "sposób" należy podać:
  • left - element ustawiony po lewej stronie, względem elementów sąsiadujących
  • right - element ustawiony po prawej stronie, względem elementów sąsiadujących
  • none - element nie sąsiaduje z innymi

Polecenie pozwala zdefiniować ustawienie danego elementu względem elementów, które z nim sąsiadują. Dzięki temu możemy ustalić sposób "oblewania" tekstem elementu pływającego (np. obrazka).

Przykład:

float: left float: left... float: left... float: left... float: left... float: left...float: left... float: left... float: left... float: left... float: left...float: left... float: left... float: left... float: left... float: left...float: left... float: left... float: left... float: left... float: left...float: left... float: left... float: left... float: left... float: left...


float: right float: right... float: right... float: right... float: right... float: right... float: right... float: right... float: right... float: right... float: right... float: right... float: right... float: right... float: right... float: right... float: right... float: right... float: right... float: right... float: right... float: right... float: right... float: right... float: right... float: right...


float: none float: none... float: none... float: none... float: none... float: none...float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none...

Ustawienie w pionie

selektor { vertical-align: sposób }

Polecenie można zastosować do elementów wyświetlanych w linii (inline) lub komórek tabeli (<td>...</td> i <th>...</th>).

Jako "sposób" należy podać:
  • baseline - wyrównuje linię bazową elementu do linii bazowej elementu nadrzędnego (domyślnie)
  • middle - ustawia element na środku wysokości elementów sąsiadujących
  • text-top - wyrównuje szczyt elementu do szczytu tekstu elementu nadrzędnego
  • text-bottom - wyrównuje podstawę elementu do podstawy tekstu elementu nadrzędnego
  • super - tworzy indeks górny z elementu, ale nie zmienia wielkości tekstu
  • sub - tworzy indeks dolny z elementu, ale nie zmienia wielkości tekstu
  • top - wyrównuje szczyt elementu do szczytu najwyższego elementu linii, w której się znajduje
  • bottom - wyrównuje podstawę elementu do podstawy elementu położonego najniżej w linii, w której się znajduje
  • wartość w jednostkach długości - przesunięcie ponad (wartości dodatnie) lub poniżej (wartości ujemne) linii bazowej
  • wartość procentową - przesunięcie ponad (wartości dodatnie) lub poniżej (wartości ujemne) linii bazowej względem wysokości linii

UWAGA! MSIE 5.0 interpretuje nieco odmiennie wartości top oraz bottom. Natomiast MSIE 4 obsługuje tylko wartości sub oraz super. Ponadto MSIE 5.0 i 5.5 nie obsługuje wartości w jednostkach długości ani procentowych.

Przykład:

komórka<br>
1
komórka2komórka3
komórka<br>
4
komórka5<td style="vertical-align: bottom">



vertical-align: text-top<img style="vertical-align: text-top">

vertical-align: middle<img style="vertical-align: middle">

vertical-align: text-bottom<img style="vertical-align: text-bottom">

vertical-align: 50%<img style="vertical-align: 50%">

vertical-align: baseline<img style="vertical-align: baseline">

vertical-align: -1em<img style="vertical-align: -1em">


Tekstvertical-align: super

Tekstvertical-align: sub

(Poniżej jest błąd w MSIE 5.0!)

Zwykły obrazek<span style="vertical-align: top">

Zwykły obrazek<span style="vertical-align: bottom">

Komentarze

Zobacz więcej komentarzy

Facebook