Podczas pracy nad arkuszem stylów wiele razy musimy środkować elementy. Jest to temat bardzo ciekawy i jednocześnie taki, który niejednokrotnie sprawia spore problemy. Dlatego postaram się teraz pokazać Ci kilka prostych, ale jednocześnie skutecznych technik, które mogą Ci się przydać jeżeli wykorzystujesz CSS.

Wyrównywanie tekstu w pionie

Wyobraźmy sobie prostą strukturę: krótki jednoliniowy tekst, który ma być wyśrodkowany w pionie. W moim przykładzie wygląda to tak :

1

Mam tutaj nagłówek h2, który powinien znaleźć się dokładnie w połowie wysokości szarego div’a. Jeszcze może szybki rzut oka na CSS:


    div { width: 40%; background: #323a3d; text-align: center; height: 140px; }

Zauważ, że div ma wysokość 140px. Ma to duże znaczenie dla techniki, której zaraz użyję. A będzie ona polegała na dodaniu właściwości line-height (czyli wysokość linii) do nagłówka h2. Wartość będzie dokładnie taka jak wysokość div’a który pełni rolę kontenera a więc 140px;

Czyli muszę użyć takiego CSS:


    div { 
    width: 40%;
    background: #323a3d;
    text-align: center;
    height: 140px;
    }
    h2 { 
    font-size: 24px;
    line-height: 140px;
    }

I po chwili otrzymuję właściwy rezultat:

2

Warto poeksperymentować z innym wariantem tej techniki:


div { 
width: 40%;
background: #323a3d; 
text-align: center; 
h2 { 
font-size: 24px;
line-height: 140px;
}

Zauważ, że usunąłem height z div’a i zostawiłem tylko line-height w nagłówku h2. Rezultat jest taki sam jak poprzednio ale tym razem to nagłówek a nie div decyduje o wysokości całego elementu. Czyli manipulując wysokością linii mogę także manipulować wysokością div. Tutaj jeszcze wspomnę o tym, że wysokość linii powinna być większa od font-size (w moim wypadku ten warunek został oczywiście spełniony).

Ta metoda pionowego środkowania jest prosta i skuteczna ale ma także dość istotne wady. Przede wszystkim jej zastosowania ograniczają się do krótkich, jednoliniowych fragmentów tekstu. Warto więc poznać dodatkowe techniki i rozwiązania.

Poznaj najnowsze trendy CSS3: Kurs CSS3 - kodowanie ze stylem Zobacz kurs

Środkowanie za pomocą padding

Może od razu przejdźmy do struktury. HTML jest bardzo prosty i zawiera tylko 2 div’y:

<div class="zewn"> <div class="wewn"> To jest element wewnętrzny </div> </div>

A tak wygląda CSS:


 .zewn { width: 30%; background: #d2d7d5; }


 .wewn { background: #354e5c; width: 60%; margin: 0 auto; }

I jeszcze szybki rzut okiem na obecny stan projektu:

3

Zauważ, że wysokość obydwu elementów jest identyczna bo żaden z nich nie posiada właściwości height. Ja chciałbym teraz zwiększyć wysokość zewnętrznego (szarego) elementu tak aby element niebieski umieszczony był na środku. W tym celu do zewnętrznego div dodam identyczny padding na dole i na górze:


 .zewn { width: 30%; background: #d2d7d5; padding: 25px 0; }

Dodałem padding góra/dół o wartości 25px i prawo/lewo o wartości 0. Tak to wygląda po otwarciu w przeglądarce:

4

Zauważ jeszcze, że przy użyciu takiej metody wysokość zewnętrznego elementu jest determinowana przez wartość padding. Im większy padding tym większa wysokość. Czyli jak to zwykle bywa, mamy do czynienia z techniką, która nie w każdej sytuacji się sprawdzi.

Środkowanie za pomocą Vertical-Align

Vertical-Align to bardzo specyficzna właściwość CSS. Niby służy do wyrównywania w pionie ale posiada pewne dość istotne ograniczenia. Jak zwykle popatrzmy na przykład:

5

Standardowy problem – akapit umieszczony wewnątrz div. Tym razem jednak nie możemy użyć rozwiązania opartego na line-height ponieważ tekst zawiera więcej niż jedną linią. Spróbujemy więc wykorzystać właściwość vertical-align: middle;


  p { width: 80%; margin: 0 auto; vertical-align: middle; }
    

Ja dodałem ją do akapitu. Jednak po odświeżeniu strony nie uzyskam żadnego rezultatu. Dlaczego? Ta właściwość działa tylko na elementach liniowych a tak naprawdę jej głównym przeznaczeniem jest wyrównywanie tekstu w komórkach tabeli. Istnieją jednak pewne sztuczki, które pozwolą nam użyć tej właściwości do pionowego wycentrowania akapitu względem div’a. Musimy po prostu zmusić przeglądarkę do interpretowania zawartości naszej strony w specyficzny sposób. Div ma być interpretowany jako tabela, natomiast akapit jako komórka tej tabeli. Zrobię to dodając właściwości display: table; oraz display: table-cell;


 div { width: 30%; background: #364f5d; text-align: center; height: 250px; display: table;
        

 } p { width: 80%; margin: 0 auto; vertical-align: middle; display: table-cell; }
 

Po takich zmianach akapit powinien być prawidłowo wyśrodkowany w pionie. Czyli użycie vertical-align to kolejna przydatna metoda choć jak wyraźnie widać jej zastosowania są dość specyficzne.

6

Zobacz również: Kurs HTML 5.1 - podstawy tworzenia stron Obejrzyj kurs

Środkowanie za pomocą właściwości transform

Transform to interesująca właściwość dostępna w CSS3. Za jej pomocą można wykonywać na elementach strony różne przekształcenia a przy odrobinie pomysłowości można jej także użyć do wycentrowania. W tym przykładzie zakładam taką oto sytuację:

<div class="zewn"> <div class="wewn"> <p>To jest element wewnętrzny i ma być umieszczony na środku wysokości elementu zewnętrznego</p> </div> </div>

Prosta struktura podobna do kodu, który był już używany w poprzednich przykładach. Teraz jeszcze CSS:



.zewn { position: relative; width: 400px; height: 400px; margin: 0 auto; background: #3f5d6f; } .wewn { position: absolute; width: 100%; background: #f0ae00; 
}

 

I rzut okiem na elementy, z którymi będziemy pracowali:

7

Chciałbym tutaj zwrócić Twoją uwagę na to, że div wewnętrzny pozycjonowany jest absolutnie i nie posiada określonej wysokości. Jest to w sumie dość powszechna sytuacja: często nie wiemy jak wysoki będzie dany element bo ta wartość uzależniona jest od wielu czynników. W każdym razie trzeba ten div teraz wyśrodkować w pionie.

Najpierw przesuniemy go w pionie do połowy wysokości jego kontenera. Czyli użyjemy top:50% :


 .wewn { position: absolute; width: 100%; background: #f0ae00; top: 50%; }
 

To jednak nie wystarczy :

8

Problem polega na tym, że punktem odniesienia jest tutaj górna krawędź przesuwanego elementu a nie jego środek. Czyli teraz jeszcze musimy przesunąć go do góry o połowę jego własnej wysokości. W tym celu użyjemy właściwości transform:


.wewn { position: absolute; width: 100%; background: #f0ae00; top: 50%; transform: translateY(-50%); }
 

Używam wartości translateY czyli przesunięcie w pionie i do tego jeszcze -50% czyli o połowę wysokości elementu do góry. Dzięki temu otrzymuję prawidłowy rezultat:

9

Taka technika środkowania jest bardzo interesująca ze względu na to, że nie trzeba na sztywno definiować wysokości dla przesuwanego elementu – będzie ona wyliczana dynamicznie. Warto także pamiętać o tym, że podobne rozwiązania mogą być użyte do skutecznego środkowania elementów w poziomie. To tylko kwestia zastąpienia wartości pionowych ich poziomymi odpowiednikami.

Podsumowanie

Środkowanie elementów strony w pionie to ciekawy i nie zawsze prosty temat. Należy liczyć się z tym, że nie ma tutaj uniwersalnych rozwiązań, które sprawdzą się w każdej sytuacji. Warto więc poznać przynajmniej kilka podstawowych sztuczek po to aby ułatwić sobie pracę w przyszłości.