Co wiedzieć
- Aby wyśrodkować tekst, użyj następującego kodu ("[/]" oznacza podział wiersza): .center { [/] wyrównanie tekstu: centrum; [/] }.
- Wyśrodkuj bloki treści za pomocą następującego kodu ("[/]" oznacza podział wiersza): .center { [/] margines: auto; [/] szerokość: 80em; [/] }.
- Aby wyśrodkować obraz ("[/]" oznacza podział wiersza): img.center { [/] wyświetlanie: blok; [/] margines-lewy: auto; [/] margines-prawy: auto; [/] }.
CSS to najlepszy sposób na wyśrodkowanie elementów, ale może być wyzwaniem dla początkujących projektantów stron internetowych, ponieważ jest tak wiele sposobów, aby to osiągnąć. W tym artykule wyjaśniono, jak używać CSS do wyśrodkowania tekstu, bloków tekstu i obrazów.
Centrowanie tekstu za pomocą CSS
Musisz znać tylko jedną właściwość stylu, aby wyśrodkować tekst na stronie:
.środek {
wyrównanie tekstu: środek;
}
W tym wierszu CSS każdy akapit napisany za pomocą klasy .center zostanie wyśrodkowany poziomo wewnątrz swojego elementu rodzica. Na przykład akapit wewnątrz podziału (dziecko tego podziału) zostanie wyśrodkowany poziomo wewnątrz.
Oto przykład tej klasy zastosowanej w dokumencie HTML:
Ten tekst jest wyśrodkowany.
Podczas centrowania tekstu za pomocą właściwości text-align pamiętaj, że będzie on wyśrodkowany w obrębie elementu zawierającego, a niekoniecznie w obrębie całej strony.
Czytelność jest zawsze kluczowa, jeśli chodzi o tekst na stronie. Duży bloki tekstu wyśrodkowanego może być trudny do odczytania, więc używaj tego stylu oszczędnie. Nagłówki i małe bloki tekstu, takie jak tekst zwiastuna artykułu, są zazwyczaj łatwe do odczytania po wyśrodkowaniu; jednak większe bloki tekstu, takie jak cały artykuł, byłyby trudne do wykorzystania, gdyby były w pełni wyśrodkowane.
Centrowanie bloków treści za pomocą CSS
Bloki treści są tworzone przy użyciu kodu HTML.
.środek {
margines: auto;
szerokość: 80em;
}
Ten skrót CSS dla właściwości margin ustawiałby górny i dolny margines na wartość 0, podczas gdy lewy i prawy używałyby „auto”. To zasadniczo zajmuje każdą dostępną przestrzeń i dzieli ją równomiernie między dwie strony okna rzutni, skutecznie centrując element na Strona.
Tutaj jest stosowany w kodzie HTML:
Cały ten blok jest wyśrodkowany,ale tekst w nim jest wyrównany do lewej.
Dopóki twój blok ma określoną szerokość, będzie wyśrodkowany wewnątrz elementu zawierającego. Tekst zawarty w tym bloku nie zostanie w nim wyśrodkowany, ale będzie wyrównany do lewej. Dzieje się tak, ponieważ w przeglądarkach internetowych tekst jest domyślnie wyrównywany do lewej. Jeśli chcesz również wyśrodkować tekst, możesz użyć omówionej wcześniej właściwości text-align w połączeniu z tą metodą, aby wyśrodkować podział.
Centrowanie obrazów za pomocą CSS
Chociaż większość przeglądarek wyświetla obrazy wyśrodkowane przy użyciu tej samej właściwości wyrównania tekstu, nie jest to zalecane przez W3C. Dlatego zawsze istnieje szansa, że przyszłe wersje przeglądarek zignorują tę metodę.
Zamiast używać text-align do wyśrodkowania obrazu, powinieneś wyraźnie powiedzieć przeglądarce, że obraz jest elementem blokowym. W ten sposób możesz go wyśrodkować tak, jak każdy inny blok. Oto CSS, aby tak się stało:
centrum.obrazu {
Blok wyświetlacza;
margines lewy: auto;
margines prawy: auto;
}
A oto kod HTML do wyśrodkowania obrazu:
Możesz również wyśrodkować obiekty za pomocą wbudowanego CSS (patrz poniżej), ale to podejście nie jest zalecane, ponieważ dodaje style wizualne do znaczników HTML. Pamiętaj, styl i struktura powinny być rozdzielone; dodanie stylów CSS do HTML spowoduje przerwanie tej separacji i dlatego powinieneś tego unikać, gdy tylko jest to możliwe.
Centrowanie elementów w pionie za pomocą CSS
Centrowanie obiektów w pionie zawsze było wyzwaniem w projektowaniu stron internetowych, ale wydanie Moduł elastycznego układu CSS w pudełku w CSS3 zapewnia sposób na zrobienie tego.
Wyrównanie w pionie działa podobnie do opisanego powyżej wyrównania w poziomie. Właściwość CSS jest wyrównana w pionie, tak jak poniżej:
.vcenter {
wyrównanie w pionie: środek;
}
Wszystkie nowoczesne przeglądarki wspierać ten styl CSS. Jeśli masz problemy ze starszymi przeglądarkami, W3C zaleca wyśrodkowanie tekstu w kontenerze w pionie. Aby to zrobić, umieść elementy wewnątrz elementu zawierającego, na przykład a divi ustaw na nim minimalną wysokość. Zadeklaruj element zawierający jako komórkę tabeli i ustaw wyrównanie w pionie na „środek”.
Na przykład tutaj jest CSS:
.vcenter {
min-wysokość: 12em;
wyświetlacz: komórka tabeli;
wyrównanie w pionie: środek;
}
A oto kod HTML:
Ten tekst jest wyśrodkowany w pionie w ramce.
Nie używaj elementu HTML do wyśrodkowania obrazów i tekstu; został przestarzały, a nowoczesne przeglądarki internetowe już go nie obsługują. Jest to w dużej mierze odpowiedź na wyraźne oddzielenie struktury i stylu w HTML5: HTML tworzy strukturę, a CSS dyktuje styl. Ponieważ centrowanie jest wizualną cechą elementu (a raczej wyglądem niż tym, czym jest), ten styl jest obsługiwany za pomocą CSS, a nie HTML. Zamiast tego użyj CSS, aby Twoje strony wyświetlały się poprawnie i były zgodne z nowoczesnymi standardami.
Centrowanie w pionie i starsze wersje Internet Explorera
Możesz zmusić Internet Explorer (IE) do wyśrodkowania, a następnie użyć komentarzy warunkowych, aby tylko IE widział style, ale są one nieco rozwlekłe i nieatrakcyjne. Decyzja Microsoftu z 2015 r. o rezygnacji ze wsparcia dla starsze wersje IE, jednak sprawi, że nie będzie to problemem, ponieważ IE przestanie być używany.