Wszystko co chcesz wiedzieć o centrowaniu w CSS
19 kwietnia 2006
W zamierzchłych czasach HTML-a centrowanie było dość proste. Podobnie jak w edytorach tekstu klikało się jeden przycisk a wszystko automatycznie znajdowało się na środku - czy to tabela, obrazek czy tekst. W HTML służył do tego uniwersalny znacznik <center/>. Wszystko do symetrycznego wyświetlenia wstawiało się w niego, a przeglądarka myślała za nas - bo nam rozróżnienie co jest elementem blokowym a co liniowym nie było potrzebne.
Czasy się jednak zmieniły i nowoczesny „webmaster” operujący na CSS, a nie przestrzałych tagach prezentacyjnych musi znać różnicę między tymi dwoma typami bloków; podobnie jak wiedzieć w jaki sposób wyśrodkowywać tekst, grafiki oraz bloki layoutu <div/>.
Poziome centrowanie elementów liniowych
Na początek żelazna reguła - centrowanie poziome właściwością text-align: center działa tylko dla tekstu. Tekst (oraz obrazki, pola formularzy, etc) jest wyświetlany liniowo i da się go tym ujarzmić.
Poziome centrowanie elementów blokowych
Text-align nic nie da w zestawieniu z blokami layoutu - gdyż upraszczając, nie są tekstem. Każdy element blokowy bez ustawionej szerokości zajmuje 100% wolnego miejsca na stronie. Dlatego wycentrowanie go jest tylko możliwe, jeśli ograniczymy jego zapędy terytorialne - musimy ustawić mu szerokość. Może być to wartość w pikselach (768px na przykład dla najbardziej popularnego layoutu), procentach, także em'ach czy ex'ach. Dzięki temu powstanie przestrzeń, na początek z prawej strony, która umożliwi przesunięcie całego bloku na środek dostępnej przestrzeni.
Kluczem w tym umiejscowieniu jest odpowiednie ustawienie marginesów - auto - zajmujący całą dostępną przestrzeń. Gdy ustawimy lewy i prawy na auto, to margines „podzieli się” tą wolną przestrzenią z prawej strony i wycentruje blok.
div#wrapper {width: 768px;margin-left: auto;margin-right: auto;}
Można także zastosować skrót właściwości margin:
div#wrapper {width: 768px;margin: 0 auto;}
Przykład na żywo.
Tak się jednak składa, że znowu należy odbić w kierunku tego jak być powinno a jak czasami jest. Internet Explorer w wersji niższej niż 6.0 (na przykład częściej używany 5.5 bądź 5.0) nie do końca rozumie takiej konstrukcji. Należy pomóc mu dokładając centrowanie tekstu dla elementu nadrzędnego i usuwając wyśrodkowanie w samym elemencie (żeby nie popsuć wyglądu przez dziedziczenie).
body {text-align: center;}div#wrapper {text-align: left;}
Wrzucamy to w komentarze warunkowe. Działa.
Poziome centrowanie obrazków
Wyśrodkowanie samotnego obrazka umieszczonego w akapicie jest możliwe dwojako. Pierwszy sposób opiera się na domyślnym wyświetlaniu liniowym każdego <img/> - wystarczy dodać klasę akapitowi, który jest pojemnikiem dla obrazka i ustawić text-align na center.
Drugi sposób działa także bez dodania klasy do akapitu, gdyż wykorzystuje kaskadę. Zamieniamy obrazek na element blokowy i centrujemy jak w przykładzie wyżej korzystając z automatycznych marginesów. Nie jest wymagane aby ustawiać mu szerokość (można to co najwyżej zrobić w dokumencie dla innego efektu) - dla blokowego <img/> wyśrodkowanie zadziała bez podanych wymiarów.
p img {display: block;margin: 0 auto;}
Gdyby się okazało, że w akapicie musimy użyć jeszcze innych obrazków, i nie mogą być one wycentrowane (na przykład emotikonki na blogu / forum) to albo dodajemy im klasę (i wracamy do display: inline) albo centrowanemu obrazkowi, zawężając działanie CSS.
Pionowe centrowanie bloków
O ile umieszczanie elementów na środku w poziome jest dość proste jak widać po przykładach na górze, tak centrowanie w pionie może pokryć niejedną głowę siwizną. Kiedyś wystarczyło wrzucić cokolwiek do komórki tabelki i ustawić atrybut valign na middle.
W CSS istnieje właściwość vertical-align, lecz działa ona w sposób jaki byśmy chcieli tylko dla tabel. Należy więc postarać się, abyśmy na nich operowali. Weźmy przykładowo dwa bloki <div/>, a w nich jakąś zawartość:
<div id="wrapper"><div id="cell"><p>In tristique convallis erat.</p><p>Lorem ipsum dolor sit amet.</p></div></div>
Blok #wrapper zamienimy na tabelkę, a #cell w nim na komórkę tabeli. Zwyczajne tabele wstawiane za pomocą znaczników <table/>, <tr/>, <td/> wyświetlają się w określony sposób za pomocą przyporządkowanych im przez DOCTYPE właściwości display.
#wrapper {display: table;}#wrapper #cell {display: table-cell;}
Potrzebujemy także określić wysokość tabeli, aby zawartość miała wymaganą przestrzeń.
#wrapper {display: table;height: 350px;}
Na koniec zawartość komórki centrujemy w pionie:
#wrapper #cell {display: table-cell;vertical-align: middle;}
Wszystko ładnie fajnie, ale znowu Explorer daje się we znaki. Nie wspiera display: table oraz table-cell. Dla niego należy użyć sztuczki z pozycjonowaniem. Potrzebny będzie dodatkowy pojemnik.
<div id="wrapper"><div id="cell"><div id="hack"><p>In tristique convallis erat.</p><p>Lorem ipsum dolor sit amet.</p></div></div></div>
Pierwszym krokiem jest wypozycjonowanie #cell w środku #wrapper w połowie wysokości:
#wrapper {position: relative;}#cell {position: absolute;top: 50%;}
Następnie dodatkowy boks pozycjonujemy relatywnie odejmując połowę jego wysokości:
#hack {position: relative;top: -50%;}
Wszystko to w komentarz warunkowy i już. :)
Pionowe centrowanie tekstu
Jeśli mamy trochę tekstu, bądź mały obrazek, to w celu wyświetlenia go na środku możemy użyć właściwości line-height. Powiększy ona wysokość linijki tekstu, a wszystko co się w niej znajduje zostanie pokazane w połowie wysokości. Dobrym miejscem na użycie tej metody są zakładki w nawigacji na stronie - aby nie były za niskie, lecz nadal dobrze zaprojektowane.
A na koniec prezent w postaci gotowego layoutu dla wszystkich nowych przeglądarek wliczając IE6 - wyśrodkowanie bloku na całej stronie w poziomie i pionie, włącznie z pozbyciem się paru błędów w IE ze scrollbarami. Można dodać jeszcze jeden <div/>, aby uporać się z centrowaniem poziomym w IE5.x ale to już dla tych co potrzebują. Enjoy. ;)
lato_p 3
19 kwietnia 2006, 18:50
Ktos 10
19 kwietnia 2006, 19:48
Kikuchi 26
24 kwietnia 2006, 20:25
mcv 33
14 maja 2006, 20:55
chester 62
04 września 2007, 21:01
D4rky 77
15 grudnia 2008, 02:09