CSS: środkowanie - W3C

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:

• Środkowanie wierszy tekstu
• Środkowanie bloku tekstu albo obrazu
• Środkowanie bloku lub obrazu w pionie

Aktualna implementacja CSS poziomu 3. pozwala na wyśrodkowywanie elementów, które są pozycjonowane bezwzględnie (ang. absolutely positioned):

• Środkowanie w pionie w CSS 3
• Środkowanie w pionie i poziomie w CSS 3
• Środkowanie według punktu widzenia w CSS 3

Ś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:

1. Uczyń kontener względnie pozycjonowanym, który będzie kontenerem dla elementu bezwzględnie pozycjonowanego.
2. Sam element uczyć pozycjonowanym bezwzględnie.
3. Umieść go w połowie kontenera za pomocą top: 50%. (Zwróć uwagę na to, że 50% oznacza tutaj 50% wysokości kontenera.)
4. 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.

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.

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

Nawigacja strony

• 
• Strona główna CSS
• Ucz się i stosuj
• Oprogramowanie
• Udział / szkice
• 

Bert Bos, Prowadzący dział CSS Prawa autorskie © 1994–2021 W3C® Privacy policy

Utworzono 5 Maja 2001; Ostatnia aktualizacja śro, 6 sty 2021, 05:40:49

Języki

• Azərbaycan
• Български
• Deutsch
• Ελληνικά
• English
• Español
• Français
• Bahasa Indonesia
• 日本語
• Norsk
• Nederlands
• Polski
• Português
• Português brasileiro
• Русский
• ไทย
• Tagalog
• Українська
• Tiếng Việt
• 简体中文
• 繁體中文

O tłumaczeniach