Przejdź do treści

Pozycjonowanie

Ustawienie

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">

Zobacz także

Więcej tematów

Dotacje

Pomogła Ci ta strona? Chcesz, aby dalej się rozwijała?
Dotpay - Bezpieczne transakcje internetowePayPalWpłać dobrowolną dotację...