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