Wyśrodkowywanie w pionie

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>

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>

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>

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="line-height:50px;border:2px solid #c33333;"><p>tekst</p></div>

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.