Centrowanie w pionie
Temat jest znany z czasów przeglądarki IE6. Brak obsługi CSS 2.1 uniemożliwia pionowe centrowanie w elementach innych niż komórki tablic <td>. Dušan Janovský na swoim blogu wyczerpująco opisał problem i zaproponował dwa rozwiązania. Wersja zgodna ze standardami niestety nie działa we współczesnych przeglądarkach.
Dobrą praktyką jest tworzenie layoutu w przeglądarce bardziej zgodnej ze standardami, później dostosowanie do tych mniej zgodnych. Pan Dušan postąpił odwrotnie. Pierwsze selektory w jego przykładzie dotyczą IE, a kolejne są poprawkami dla Firefoxa i Opery. Aby przykład zaczął działać, wystarczy zmienić pozycjonowanie na statyczne za pomocą selektorów poprawkowych.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Centrowanie w pionie</title>
<style type="text/css">
#align-middle {height: 400px; overflow: hidden; position: relative;}
#align-middle[id] {display: table; position: static;}
#middle-wrap {position: absolute; top: 50%;} /* tylko dla IE */
#middle-wrap[id] {display: table-cell; vertical-align: middle; width: 100%; position: static;}
#middle {position: relative; top: -50%} /* tylko dla IE */
#middle[id] {position: static;}
.border {border: 1px solid #000; background-color: #eee;}
</style>
</head>
<body>
<h1>Centrowanie w pionie</h1>
<div id="align-middle" class="border">
<div id="middle-wrap">
<div id="middle" class="border">
Tekst demonstracyjny<br>
wielowierszowy
</div>
</div>
</div>
</body>
</html>
Podejście jest o tyle złe, że występuje tutaj niepotrzebna kaskadowość stylów, a w przyszłości może się pojawić przeglądarka, w której przykład znowu przestanie działać. Rozwiązaniem jest wykorzystanie komentarza warunkowego dla IE7. A oto przykład.
No tak, strasznie dużo tych kaskad. Czasami są takie sytuacje, kiedy trzeba zrobić coś wbrew regułom. I to jest ta sytuacja, kiedy używam tabeli. Nie zanosi się, żeby ich obsługa miała zostać usunięta, więc póki przeglądarki nie nauczą się centrować w pionie w DIVach, będę tego używał. Takie komplikowanie kodu to trochę sztuka dla sztuki. Zwłaszcza, że jak piszesz: „w przyszłości może się pojawić przeglądarka, w której przykład znowu przestanie działać”. Po co się stresować taką ewentualnością?
Nie do końca sztuka dla sztuki. To raczej kwestia SEO. Przykład z komentarzem warunkowym jest dużo prostszy i raczej nie przestanie działać
Pozdrawiam
Używam tabel do centrowania własnego Lighboxa dla powiększonych zdjęć czy alertów od systemu i jakoś nie zauważyłem negatywnego wpływu na SEO. Gdyby zawartość tabel była zła z punktu widzenia SEO, to w ogóle by się ich nie używało do niczego. Ale jedna tabela na warstwie pozycjonowanej absolutnie z jedną komórką, w której wyświetlam jakiś element raczej nie powinna szkodzić.
Co innego pocięcie całego layoutu do tabel… Ale tu raczej chodzi o sieczkę w kodzie niż samo używanie tabel. Dlatego SEO tego nie lubi.
No ale to już moje zdanie i wcale nie musi być zgodne z rzeczywistością.
Pozdrawiam!
Dzięki wielkie. Działa super.