Niniejszy dokument jest tłumaczeniem, które może zawierać błędy, lub który mógł się zdeaktualizować w stosunku do wersji angielskiej. Wykonane przez: Emil Sierżęga
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 śro, 6 sty 2021,
05:40:49