6 sztuczek CSS do wyrównania treści w pionie

Porozmawiajmy o wyrównaniu pionowym w CSS, a dokładniej o tym, jak nie można tego zrobić. CSS nie udostępnił jeszcze oficjalnego sposobu na wyśrodkowanie treści pionowo w kontenerze. Jest to problem, który prawdopodobnie sfrustrowany programistów internetowych wszędzie. Ale nie bojąc się, w tym poście, uruchomimy kilka sztuczek, które mogą ci pomóc naśladować efekt.

Te sztuczki mogą mieć jednak ograniczenia i być może będziesz musiał użyj więcej niż jednego triku aby zakończyć iluzję. Jeśli znasz inną sztuczkę, daj nam znać w komentarzach.

1. Użyj pozycjonowania bezwzględnego

Pierwsza sztuczka, którą tu zobaczymy, wykorzystuje pozycja własność. Ty masz dwa

, jeden to kontener, a drugi element podrzędny zawierający treść.

Najpierw ustawimy pozycję elementu kontenera na względną, a następnie ustawimy pozycję elementu podrzędnego na absolutny. Dzięki temu możemy swobodnie umieścić go na pojemniku.

Aby wyrównać go pionowo, przesuń pozycję elementu potomnego od góry, o połowę wysokości kontenera, i pociągnij do góry o połowę szerokości elementu potomnego. Oto wyjście:

Ta sztuczka jest idealna, gdy istnieje tylko jeden element potomny, w przeciwnym razie absolutny pozycja wpłynie na inny element w tym samym kontenerze.

2. Użyj CSS3 Transform

CSS3 Przekształć ułatwiło umieszczanie treści w centrum. CSS3 Przekształć, w przeciwieństwie do pozycja właściwość, nie wpłynie na pozycję innych elementów w tym samym kontenerze.

Zakładając, że mamy taką samą strukturę HTML jak poprzednia metoda - jeden rodzic, jeden element podrzędny - 50% z góry i użycie transformacji CSS daje tłumaczenie -50%. I masz to.

Pamiętaj jednak, że przekształcenia CSS3 nie będą działać w przeglądarce Internet Explorer 8 i poniżej. Możesz użyć dowolnej z pozostałych metod jako rezerwowych.

3. Użyj wypełnienia

Możemy również użyć wyściółka stworzyć iluzję wyrównania pionowego. Aby to zrobić, po prostu ustaw górne i dolne wypełnienie jednakowo, w następujący sposób:

Ta sztuczka jest odpowiednia, gdy nie ustawisz kontenera w stałej szerokości, po prostu ustaw szerokość na automatyczny.

4. Użyj wysokości linii

Jeśli w kontenerze znajduje się tylko jedna linia treści tekstowej, możesz wyrównać tekst w pionie, używając Wysokość linii własność. Ustaw Wysokość linii wartość mniej więcej taka sama jak wysokość kontenera, a zobaczysz następujące wyjście.

Pamiętaj, że ta sztuczka działa tylko w jednym wierszu tekstu. Jeśli zawartość zostanie podzielona na dwie lub więcej linii, odstęp między wierszami będzie taki, jak określono w Wysokość linii, dając nam zbyt wiele białych znaków.

5. Użyj tabeli CSS

Osobiście korzystanie z tabeli CSS jest moją ulubioną sztuczką do stosowania wyrównania w pionie. Działa w starych przeglądarkach, takich jak Internet Explorer 8. Ta metoda jest wykonywana przez ustawienie wyświetlania elementu kontenera na stół, podczas gdy element potomny ma być wyświetlany jako komórka stołowa następnie użyj wyrównaj pionowo właściwość do wyśrodkowania tekstu w pionie.

6. Użyj Flexbox

Ostatnią metodą centrowania pionowego jest użycie Flexbox. Flexbox to nowy moduł w CSS3. Oferuje prostszą metodę wyrównywania zawartości. Aby wyśrodkować zawartość pionowo w polu flex, po prostu dodaj align-items: center; w następujący sposób i to wszystko.

Pamiętaj, że niektóre przeglądarki Flexbox obsługują tylko częściowe funkcje modułu Flexbox, takie jak Internet Explorer 10, Safari, 6 i Chrome 27 i niżej. Stąd, podobnie jak w przypadku sztuczki z CSS3 Transform, upewnij się, że efekt w tej przeglądarce ładnie spada.