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.
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: 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...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>).
- 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órka2 | komórka3 |
| komórka<br> 4 | komórka5 | <td style="vertical-align: bottom"> |
<img style="vertical-align: text-top"><img style="vertical-align: middle"><img style="vertical-align: text-bottom"><img style="vertical-align: 50%"><img style="vertical-align: baseline"><img style="vertical-align: -1em">Tekstvertical-align: super
Tekstvertical-align: sub
(Poniżej jest błąd w MSIE 5.0!)
<span style="vertical-align: top"><span style="vertical-align: bottom">