Zobacz także indeks wszystkich porad.
Powszechnym zadaniem CSS-ów jest wyśrodkowywanie tekstu lub obrazów. W zasadzie, środkowanie można podzielić na 3 rodzaje:
Aktualna implementacja CSS poziomu 3. pozwala na wyśrodkowywanie elementów, które są pozycjonowane bezwzględnie (ang. absolutely positioned):
Najbardziej powszechnym i (co za tym idzie) najłatwiejszym typem
wyśrodkowywania jest środkowanie wierszy tekstu w paragrafie oraz nagłówków.
CSS posiada do tego właściwość text-align
:
P { text-align: center } H2 { text-align: center }
wyświetla każdy wiersz w P albo w H2 jako wyśrodkowany względem marginesów, jak widać poniżej:
Wiersze w paragrafie są wyśrodkowane pomiędzy
marginesami tego paragrafu, dzięki wartości center
we
właściwości CSS text-align
.
Czasami chcemy wyśrodkować nie tylko tekst, ale cały blok. Albo inaczej,
chcemy, aby marginesy po obu stronach były równe. Sposobem na osiągnięcie
takiego efektu jest ustawienia marginesów na auto
. Zwyczajowo
używa się tego kiedy blok ma określoną szerokość, ponieważ jeśli blok jest
elastyczny, to po prostu zajmie cały dostępna przestrzeń. Przykład poniżej:
P.blocktext { margin-left: auto; margin-right: auto; width: 10em } ... <P class="blocktext">Ten raczej wąski...
Ten raczej wąski blok tekstu jest wyśrodkowany. Zauważ, że wiersze wewnątrz samego bloku nie są wyśrodkowane (są wyrównane do lewej strony), inaczej niż w poprzednim przykładzie.
To także sposób na wyśrodkowywanie obrazków: przerób je na blok, a później ustaw marginesy. Na przykład:
IMG.displayed { display: block; margin-left: auto; margin-right: auto } ... <IMG class="displayed" src="..." alt="...">
Ten obrazek jest wyśrodkowany:
CSS poziomu 2. nie posiada właściwości do wyśrodkowywania rzeczy w pionie. Co innego CSS poziomu 3. (zobacz poniżej). Ale nawet w CSS2 możesz wyśrodkowywać bloki w pionie poprzez kombinację kilku właściwości. Trik polega na tym, aby sformatować blok jak komórkę tabeli, ponieważ zawartość komórki tabeli może być wyśrodkowywana w pionie.
W przykładzie poniżej wyśrodkowujemy paragraf wewnątrz bloku o określonej wysokości. Osobny przykład pokazuje paragraf, który jest wyśrodkowany w pionie względem całego okna przeglądarki, ponieważ znajduje się wewnątrz bloku, który jest tak wysoki jak całe okno oraz jest pozycjonowany bezwzględnie.
DIV.container { min-height: 10em; display: table-cell; vertical-align: middle } ... <DIV class="container"> <P>Ten mały paragraf... </DIV>
Ten mały paragraf jest wyśrodkowany w pionie.
CSS3 oferuje nowe możliwości. W czasie pisania (2014), najlepsza droga
do osiągnięcia wyśrodkowania bloku w pionie bez używania pozycjonowania
bezwzględnego (które może powodować nakładanie się na siebie tekstu)
była stale dyskutowana. Ale jeśli wiesz, że nakładanie się na siebie tekstu
nie stanowi w Twoim przypadku problemu, to możesz użyć właściwości
transform
, aby wyśrodkować pozycjonowany bezwzględnie
element. Na przykład:
Ten paragraf jest wyśrodkowany w pionie.
Dokument wygląda wtedy tak:
<div class=container3> <p>Ten paragraf... </div>
a style tak:
div.container3 { height: 10em; position: relative } /* 1 */ div.container3 p { margin: 0; position: absolute; /* 2 */ top: 50%; /* 3 */ transform: translate(0, -50%) } /* 4 */
Kluczowe zasady to:
top: 50%
. (Zwróć uwagę
na to, że 50% oznacza tutaj 50% wysokości kontenera.)
translate(0, -50%)
odnosi się do wysokości samego elementu.)
Obecnie (od około 2015 roku) inna technika stała się dostępna w kilku
implementacjach CSS. Bazuje ona na nowym modelu flex (display: flex
),
który jest zaprojektowany do używania w graficznych interfejsach użytkownika
(ang. GUI, Graphical User Interfaces), ale nic nie stoi na przeszkodzie
by używać go w swoich dokumentach, o ile dokument ma odpowiednią strukturę.
Ten paragraf jest wyśrodkowany w pionie.
Wykorzystane style wyglądają tak:
div.container5 { height: 10em; display: flex; align-items: center } div.container5 p { margin: 0 }
Możemy rozszerzyć obie powyższe metody, aby wyśrodkowana element zarówno w poziomie jak i w pionie.
Efektem ubocznym bezwzględnego pozycjonowania paragrafu, jest fakt, że jest on wtedy tak szeroki jak potrzebuje (oczywiście, o ile jawnie nie określimy wcześniej szerokości). W poniższym przykładzie dokładnie tego chcemy. Środkujemy paragraf złożony z wyłącznie jednego słowa ("Wyśrodkowany"), więc powinien być tak szeroki, jak szerokie jest samo słowo.
Wyśrodkowany!
Żółte tło pokazuje jak duży tak naprawdę jest cały paragraf. Znaczniki HTML wyglądają tak samo jak poprzednio:
<div class=container4> <p>Wyśrodkowany! </div>
Style są podobne do poprzednich przykładów, ale teraz przemieszczamy
element o połowę w poziomie. Wykorzystując left: 50%
jednocześnie przesuwamy element w lewo o połowę swojej szerokości
za pomocą translate
:
div.container4 { height: 10em; position: relative } div.container4 p { margin: 0; background: yellow; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%) }
Następna sekcja wyjaśni dlaczego należy dodać także
margin-right: -50%
.
Kiedy model flex jest wspierany, jest jeszcze prościej:
Wyśrodkowany!
przy użyciu poniższych stylów:
div.container6 { height: 10em; display: flex; align-items: center; justify-content: center } div.container6 p { margin: 0 }
Jedyną rzeczą dodaną jest tutaj justify-content: center
.
Podobnie jak align-items
określa pionowe wyrównanie
zawartości kontenera, tak justify-content
określa
wyrównanie poziome. (Tak naprawdę sprawa jest trochę bardziej skomplikowana,
na co wskazuje nazwa — angielskie justify oznacza justowanie
— ale w prostym przypadku tak to działa.) Efektem ubocznym flex
jest to, że element, który jest dzieckiem, w tym wypadku P, jest automatycznie
ustawiony jako najmniejszy możliwy.
Domyślnym kontenerem na elementy pozycjonowane bezwzględnie jest punkt widzenia (ang. viewport). (Jeśli korzystasz z przeglądarki, to wtedy jest to okno przeglądarki internetowej.) W związku z tym, wyśrodkowywanie jest bardzo proste. Poniżej znajdziesz kompletny przykład. (Wykorzystywana jest składnia z HTML5.)
<html> <style> body { background: white } section { background: black; color: white; border-radius: 1em; padding: 1em; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%) } </style> <section> <h1>Ładnie wyśrodkowane</h1> <p>Ten tekst jest wyśrodkowany w pionie. <p>W poziomie też, jeśli tylko okno jest dość szerokie. </section>
Wynik działania powyższego kodu możesz obejrzeć w osobnym dokumencie.
Prawy margines (margin-right: -50%
) jest wymagany, aby
wyrównać parametr left: 50%
, który zmniejsza o połowę dostępną
dla elementu szerokość. W ten sposób mechanizm renderujący będzie starał się
stworzyć linie, które są nie dłuższe niż połowa szerokości kontenera. Mówiąc,
że prawy margines elementu jest oddalony na prawo o taką samą odległość,
sprawiamy, że maksymalna szerokość linii znowu jest taka sama jak szerokość
całego kontenera.
Spróbuj pobawić się szerokością okna. Jeśli okno jest odpowiednio
szerokie, to każde zdanie znajdzie się w osobnym wierszu. Dopiero, gdy
okno jest zbyt wąskie zdania rozbiją się na kilka wierszy. Kiedy usuniesz
margin-right: -50%
i ponownie zmienisz rozmiar okienka, to
zobaczysz, że zdania będą rozbite na kilka wierszy nawet, jeśli okno jest
dwa razy dłuższe od samego tekstu.
(Wykorzystanie translate
do wyśrodkowywania w punkcie
widzenia zostało po raz pierwszy zaproponowane przez użytkownika
"Charlie" jako odpowiedź na Stack Overflow.)
Utworzono 5 Maja 2001;
Ostatnia aktualizacja