vertical-align: middle; w zgodzie z IE

Autor: Daniel Krysiak

Zgodnie ze specyfikacją W3C, nie możemy użyć stylu vertical-align w elementach display: block; a jedynie w display: table; którego nie interpretuje Internet Explorer. Prezentuję sposób, jak zastosować vertical-align: middle; dla większości przeglądarek.

Informacje: Testowane na: IE 5+; Gecko (NN6+, Mozilla, Firefox); Opera 7+; Pajączek 5.

Na początek przygotujmy sobie style:

.middle1 { 
   display: table; _position: relative; 
} 
.middle2 { 
   _position: absolute; _top: 50%; _left: 0px; _width: 100%; display: table-cell; 
vertical-align: middle; 
} 
.middle3 { 
   _position: relative; _top: -50%; 
} 

W powyższym kodzie została zastosowana technika Underscore Hack która sprawia, że style mające na początku ‘_’ są interpretowane tylko przez IE.

Teraz przykład kodu HTML:

<div class="middle1" style="border: 1px solid black; width: 
200px; height: 200px; text-align: center;"><-- Pierwsza warstwa 
--> 
   <div class="middle2"><!-- Druga warstwa --> 
      <div class="middle3">tekst, tekst, tekst, 
tekst</div><!-- Trzecia warstwa --> 
   </div> 
</div> 

Style w pierwszym div’ie nie są wymagane, może oprócz określenia rozmiaru „głównego pudełka”.

Przeglądarka IE nie interpretuje display: table; ani display: table-cell; Dlatego nie możemy dla niej użyć vertical-align. Stosujemy więc odpowiednio pozycjonowane warstwy zagnieżdżone. Druga warstwa jest ustawiona 50% od góry, co powoduje wyrównanie jej górnej krawędzi do środka warstwy pierwszej – traszkę za nisko. Dlatego trzecia warstwa odejmuje 50% od góry co powoduje dokładne wyśrodkowanie. Dodatkowo warstwa druga ma style: _left: 0px; _width: 100%; które powodują jej wyrównanie do lewej i rozciągnięcie na całą szerokość warstwy pierwszej. Dzięki temu możemy użyć text-align: center;

Warstwa trzecia może być inline: p, img, span, itp.

Dodam dla tych co nie wiedzą, że aby doszło do zagnieżdżenia warstw ze stylem position, wartości tego stylu (absolute i relative) muszą być stosowane naprzemiennie, tak jak w powyższym kodzie.

W przypadku reszty przeglądarek, warstwa pierwsza ma display: table; (przyjmijmy że staję się tabelką table), warstwa druga ma display: table-cell; (staję się elementem tableli, powiedzmy td) i vertical-align: middle; (tak jakby valign), który ustawia warstwę trzecią (powiedzmy element znacznika td) na środku w pionie

Oczywiście można zastosować text-align: center; który ustawi nam element centralnie. Można go przypisać warstwie pierwszej jak i drugiej.

Miłego centrowania

Daniel Krysiak