Czasami potrzebujemy wycentrować jakiś element strony, np. okienko informujące o błędzie. O ile z wyśrodkowaniem poziomym nie ma problemu, to wyśrodkowanie pionowe sprawia pewne trudności. W tym wpisie pokażę wam krok po kroku, jak wycentrować zwykłego DIV-a.
Kod HTML
Na początek przedstawię Wam przykładowy kod HTML, na podstawie którego będziemy pracować. Będzie to najprostszy dokument z jednym DIV-em zawierającym tekst:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="Stylesheet" type="text/css" href="style.css" /> <title>Wycentrowanie</title> </head> <body> <div id="wycentrowane"> <h2>Przykład</h2> <p>Tekst przykładu.</p> </div> </body> </html> |
Zakładam, że posiadacie podstawową wiedzę o HTMLu i ten kod jest dla Was w pełni zrozumiały. Przejdźmy więc dalej.
Style CSS
Teraz zajmiemy się stylami. Tutaj ustawimy wszystkie parametry niezbędne do wyśrodkowania oraz nadamy naszemu przykładowi trochę koloru.
Utwórzmy więc plik style.css i wpiszmy do niego style trzech obiektów: DIV-a, nagłówka H2 oraz akapitu P:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | div#wycentrowane { background-color: #FFAD73; border: solid 2px #FF6A00; } div#wycentrowane h2 { margin: 5px; color: #A64500; } div#wycentrowane p { margin: 10px; color: #A64500; } |
Teraz dobrze widoczne będzie położenie DIV-a, a całość nabierze jako-takiej estetyki.
W kolejnym kroku zajmiemy się stylizowaniem DIV-a, więc kolejne fragmenty kodu wpisujcie między klamry stylu div#wycentrowane.
Wielkość obiektu
Jeśli chcemy obiekt idealnie wycentrować, to musimy podać w stylach jego wysokość i szerokość. Nasz DIV nie będzie duży, więc wystarczy:
1 2 | width: 200px; height: 80px; |
Na podstawie wielkości obiektu będzie odbywało się centrowanie, więc nie pomijajcie tego kroku!
Pozycja
Teraz zajmiemy się pozycją obiektu. Pozycja musi być absolutna, a odległość obiektu od górnej i lewej krawędzi musi wynosić 50%:
1 2 3 | position: absolute; top: 50%; left: 50%; |
Kiedy już to zrobimy, zauważymy, że cały obiekt uciekł za bardzo w prawą stronę. Jest to winą tego, że w pozycji absolutnej 50% to odległość lewej i prawej krawędzi obiektu od ram strony. Tutaj wkracza użycie wielkości obiektu.
Marginesy
Aby w końcu poprawnie wycentrować naszego DIV-a, należy mu nadać ujemne lewe i prawe marginesy. Ich wartość powinna wynosić połowę szerokości i wysokości obiektu, czyli jeśli nasz obiekt ma szerokość 200 pikseli, to lewy margines musi wynosić -100 pikseli. Idąc tym tropem wpisujemy:
1 2 | margin-top: -40px; margin-left: -100px; |
Voila! Gotowe. Teraz jeszcze podaję treść całego pliku style.css w razie, gdyby coś Wam nie działało:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | div#wycentrowane { width: 200px; height: 80px; position: absolute; top: 50%; left: 50%; margin-top: -40px; margin-left: -100px; background-color: #FFAD73; border: solid 2px #FF6A00; } div#wycentrowane h2 { margin: 5px; color: #A64500; } div#wycentrowane p { margin: 10px; color: #A64500; } |
Mam nadzieję, że artykuł ten przyda Wam się przy tworzeniu stron.
Byyyyyyyyyyyyłoooo (prawie 4 lata się spóźniłeś):
http://perfectionorvanity.com/2006/04/19/wszystko-co-chcesz-wiedziec-o-centrowaniu-w-css/
opisałem tu bardziej pozycjonowanie w CSS, wyśrodkowanie w pionie i poziomie bardziej odnosi się do odpowiedniego ustawiania tekstu w komórkach tabelek albo w div’ach.
@Athlan
Oooo! Właśnie gdzieś kiedyś o tym czytałem, tylko nie mogłem tego znaleźć. No ale trudno. Napisałem, to niech zostanie.
Niby nie powinno się stosować tabelek w layoucie, ale jeśli cały składa się z jednego wycentrowanego w pionie i poziomie diva, to już odpuszczam i robię sobie vertical-align: center;. No ale cóż, trzeba sięoduczyć złych praktyk, więc pewnie spróbuję Twojego sposobu. ;]
A co jeśli wysokość div-a nie jest statyczna i raz może być 100 a raz 300? Wtedy pozostaje już chyba tylko tabela… (wykluczam JS).
No na to narazie nie znalazłem sposobu, ale jak coś znajdę to zaktualizuję wpis.
Osobiście w poziomie wycentrował bym za pomocą margin: auto. Jeśli zdefiniujesz text-align na center dla body to na IE 6+ też zadziała.
body, html {text-align: center;}
#wycentrowane { margin: auto; width: 400px; height: 400px;}
Co do pionu to faktycznie trochę gorzej. Na necie jest dużo przykładów np z użyciem display.
text-aling: center średnio ładnie jest uzywanie właśnie tego parametru.
Moze i średnio ładne, ale skuteczne i działa, a przykład kolegi sielaj rozszerzyłbym do tego poziomu:
body, html {text-align: center;}
#wycentrowane { text-align: left; margin: auto; width: 400px; height: 400px;}
żeby nam się tekst w danej warstwie nie centrował
http://www.w3.org/Style/Examples/007/center-example.html
kombinatoryka rox.
Faktycznie, nie ma to jak sobie życie utrudnić. Często stosuję display: table-something, ale jak to mówią: “jak się nie potkniesz to nie zauważysz”. ;]
@Sebastian Potasiak, Google stara się puszczać wysoko wyniki, a samo szukanie nie boli:
http://www.google.pl/search?sourceid=chrome&ie=UTF-8&q=centrowanie+w+pionie+i+w+poziomie
1. wynik
http://www.google.pl/search?hl=pl&q=wy%C5%9Brodkowanie+w+pionie+i+w+poziomie&btnG=Szukaj&lr=&aq=f&oq=
2. wynik
Dzieki