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ę.

Formularze - Struktura i prezentacja | Przygotowanie strony do druku
Zmodyfikowano: 25.08.2007, 19:20
submit