Wyśrodkowywanie w pionie
Opublikowano 2009-09-16 14:55:06 css (x)html
1. Wprowadzenie
Dzisiaj zajmiemy się technikami wyśrodkowania elementów strony w pionie. Użyjemy do tego celu styli CSS. Zacznijmy od przypadku wręcz trywialnego.
2. Elementy tabeli
Mając tabelę wystarczy do danej komórki(lub całej tabeli) dodać: vertical-align:middle
Przykład zastosowania:
<table>
<tr>
<td style="border:2px solid #c33333;height:50px;vertical-align:middle">
<p>Przykładowy tekst</p>
</td>
</tr>
</table>Przykładowy tekst |
3. Element o znanej wysokości
Aby skorzystać z tej metody, element który chcemy wyśrodkować musi mieć znaną nam wysokość. Element, który chcemy wyśrodkować otaczamy elementem blokowym z własnościąposition: relative co sprawi, że elementy wewnątrz tego bloku będą się pozycjonować względem tego elementu; sam element natomiast bottom:0;margin:auto;position:absolute;top:0. Zobaczmy jak to wygląda w praktyce.
<div style="border:2px solid #c33333;height:200px;position:relative;width:200px">
<p style="bottom:0;height:20px;margin:auto;position:absolute;top:0">Przykładowy tekst</p>
</div>Przykładowy tekst
4. Pojedyncza linia
Jeśli mamy do wyśrodkowania element, który mieści się w jednej linii to polecam skorzystanie z tej metody. Polega ona na tym, że elementowi nadrzędnemu nadajemy style CSSline-height: xxpx;, gdzie "xx" to wysokość elementu.
<div style="line-height:50px;border:2px solid #c33333;"><p>tekst</p></div>
tekst
5. Używanie marginesów
Metoda najczęściej używana, polega na odpowiednim ustawieniu marginesów, musimy znać wysokość elementu, którego chcemy wyśrodkować. Dla naszego przykładu załóżmy, że chcemy wyśrodkowaćparagraf o wysokości 20px w elemencie blokowym o wysokości 40px.
<div style="border:2px solid #c33333;height:40px"><p style="border:2px solid #c33333;height:20px;margin-top:10px><p>tekst</p></div>
tekst
W skrócie mówiąc, jeśli mamy element o wysokości (height) 20px, zawarty w elemencie o wysokości 40px, to aby był wyśrodkowany w pionie musi mieć 10 pikseli wolnej przestrzeni na gorze i dole. Uzyskujemy to wpisując stylmargin-top:xxpx co sprawi, że nasz element będzie odsunięty od nadrzędnego elementu o 10px. Metoda ta jest najczęściej stosowana w przypadku statycznych elementów strony
