Języki
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
Arkusze Kaskadowe Stylów CSS tips & tricks
Zobacz także indeks wszystkich porad.
Środkowanie
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):
Środkowanie wierszy tekstu
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.
Środkowanie bloku tekstu albo obrazu
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: 
Środkowanie bloku lub obrazu w pionie
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.
Środkowanie w pionie w CSS 3
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:
- Uczyń kontener względnie pozycjonowanym, który
będzie kontenerem dla elementu bezwzględnie pozycjonowanego.
- Sam element uczyć pozycjonowanym bezwzględnie.
- Umieść go w połowie kontenera za pomocą
top: 50%. (Zwróć uwagę na to, że 50% oznacza tutaj 50% wysokości
kontenera.)
- Użyj przesunięcia (ang. translation), aby
przenieść element w górę o połowę jego własnej wysokości. (50% w
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 }
Środkowanie w pionie i poziomie w CSS 3
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.
Żół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:
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.
Środkowanie według punktu widzenia w CSS 3
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.)
