Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS

Święty Graal środkowania CSS

by
Difficulty:BeginnerLength:ShortLanguages:

Polish (Polski) translation by Mateusz Kurlit (you can also view the original English article)

Chris Coyier ostatnio opublikował drzewo decyzyjne na swojej stronie, CSS Tricks, aby zaprezentować mnóstwo sposobów na poziome lub pionowe środkowanie elementów za pomocą CSS. Jako samodzielne rozwiązania, wszystkie posiadają swoje ograniczenia, ale połączone są niezastąpionymi narzędziami, które działają w każdej przeglądarce, jak również w IE8 oraz nowszych wersjach.

Oto jak to zrobić.

Uwaga: aby omówić wszystkie podstawy, przygotowałem objaśnienie w formie pisanej i wideo.

Obejrzyj wideo

Pobierz wideo lub subskrybuj kanał Tuts+ Web Design na Youtube.

Przeczytaj poradnik

Jeśli tworzysz responsywną stronę, prawdopodobnie będziesz ustawiał rozmiary elementów w procentach, dlatego najpierw dodajmy element .containter.

Aby mieć pewność, że element wewnątrz odpowiednio się rozciąga, ustawmy html, body { width: 100%; height: 100%; }.

Przechodząc do tabel

Wewnątrz .containter zamierzamy otrzymać wyśrodkowanie pionowe w prostym układzie tabeli. W ten sposób bierzemy zwykłe elementy blokowe i sprawiamy, że zachowują się jak komórki tabeli, dając nam wyśrodkowanie pionowe:

Na koniec, zamierzamy dodać poziomo wyśrodkowany element:

Wewnątrz kodu możesz umieścić wszystko co tylko chcesz, włącznie z dynamicznymi blokami tekstu oraz bezwzględnie pozycjonowanymi elementami.

Gotowy projekt na GitHub

Modyfikacje

Aby zmienić poziome wyśrodkowanie elementu, po prostu zmień właściwość text-align elementu .inner. Aby zmienić pionowe wyśrodkowanie, zmień właściwość vertical-align elementu .inner.

Podsumowanie

Ten przykład wydaje się mieć wiele znaczników, jednakże jedynymi elementami roboczymi są trzy div.outer.inner.centered. Stylizowanie elementów jest spójne, więc możesz wykorzystać je w gotowym kodzie CSS dla wszystkich projektów i nigdy więcej się o nie nie martwić.

Technika posiada jeden element więcej niż większość sposobów środkowania i jest całkowicie niezawodna. Mam nadzieję, że stanie się standardowym podejściem, a my w końcu przestaniemy martwić się o środkowanie w CSS.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.