Centrowanie elementów za pomocą CSS
Centrowanie w poziomie
Tekst
Tekst wewnątrz bloku centruje się za pomocą text-align:center
. Właściwość ta działa tylko na elementy typu
inline — cały blok może mieć inne położenie.
Elementy mające display:inline
, display:inline-block
, display:inline-table
są traktowane jak tekst, więc też zostaną wycentrowane (m.in.: obrazki, elementy
formularza).
p.komunikat {text-align:center;}
text-align
jest dziedziczony, więc jeśli nie chcesz, żeby działał na potomków elementu, musisz im nadać inną wartość tej właściwości.
Statyczne elementy blokowe
Najczęściej elementy centruje się za pomocą margin:auto
.
Aby ta właściwość zadziałała, element musi mieć ustaloną szerokość albo ustawiony display:table
(który spowoduje automatyczne wyliczenie szerokości).
body {
width:80%;
min-width:500px;
max-width:60em;
margin: 0 auto;
}
Wyśrodkowanie całej strony, która zajmie 80% szerokości okna, ale nie mniej niż 500px (bo np. umieszczone obrazki się nie zmieszczą), ani nie więcej niż 60em (bo tak bardzo rozciągnięty tekst jest słabo czytelny).
Centrowanie w pionie
Strony internetowe z założenia są „ciągłe” i mają zajmować minimalną niezbędną wysokość. Również gdy się je drukuje na wielu kartkach, to nie jest jasne, gdzie jest środek (strony? kartki?). Z tego powodu centrowanie w pionie jest trudne w CSS.
Tekst
Tekst (i elementy inline
, inline-block
, inline-table
) tylko w obrębie pojedynczej linii centruje się za pomocą vertical-align:middle
.
Centrowanie wewnątrz komórek tabel
Dla elementów tabel
najlepiej działa właściwość vertical-align:middle
, która wyjątkowo centruje w pionie całą zawartość komórki (a nie tylko tekst).
p.komunikat {
height: 10em;
display:table;
vertical-align:middle;
}
Dla elementów blokowych — nadanie wysokości
Żeby wycentrować jeden element w pionie potrzebny jest element nadrzędny posiadający konkretną wysokość i niestety nie może to być po prostu 100%
— zobacz opis height
.
Centrowanie elementów o stałej wysokości
Jeśli element do wycentrowania i element, w którym się on znajduje, mają stałą wysokość, to można ustawić odpowiednio duży margin
i/lub padding
, aby odsunąć element na odpowiednią
wysokość.
Centrowanie elementów absolutnie pozycjonowanych
Ustawienie left:50%
lub top:50%
centruje względem lewego górnego rogu elementu, a nie jego środka, przez co element nie będzie równo na środku. Można to skorygować za
pomocą sztuczki — nadać elementowi ujemny lewy/górny margines na połowę jego wielkości.
#srodek {
width:200px; margin-left: -100px;
height:150px; margin-top: -75px;
position:absolute; top:50%; left:50%;
}
Jeśli element nie musi mieć stałej wielkości, to można go łatwo wycentrować ustalając równą odległość od krawędzi elementu go zawierającego:
#srodek {
position:absolute;
top:50px; left:50px;
bottom:50px; right:50px;
}
Centrowanie na środku ekranu
Do wyśrodkowania elementu na ekranie potrzeba rozciągnąć <body>
na cały ekran i wtedy można użyć sposobu
z pozycjonowaniem absolutnym wspomnianym wcześniej.
html,body {height:100%;}
lub
body {
min-height:100%;
/* samo min-height nie zadziała */position:absolute; top:0;left:0;
/* ale zadziała dla elementów pozycjonowanych */margin:0;padding:0;width:100%;
/* elementy pozycjonowane mają domyślnie minimalną szerokość */}
Pytania? Komentarze? Napisz na forum kursu lub edytuj tę stronę.
Zmodyfikowano: 25.08.2007, 19:20