Wyśrodkowanie zawartości kolumn względem siebie nawzajem

Kategoria wpisu Flexbox, Kurs CSS, Kursy, PHP, HTML, CSS Tagi: , , , , on przez .



Reading Time: 2 minutes

Dziś zajmiemy się w ostatnich czasach bardzo popularnym problemem czyli wyśrodkowaniem w pionie względem siebie zawartości dwóch lub większej ilości kolumn. Umiejętność ta może przydać nam się np. kiedy chcemy obok dużego obrazka umieścić tekst, ale w taki sposób by nad jak i pod tekstem znajdowała się wolna przestrzeń. Oczywiście można by to było zrobić przy pomocy właściwości padding, ale z punktu widzenia RWD to kiepski pomysł (za dużo pracy z dopasowywaniem odpowiednich odległości). Dodatkową zaletą metod, które chcę omówić jest możliwość wielokrotnego jest stosowania. Do uzyskania niżej podobnego np. lustrzanego efektu będziemy mogli ponownie użyć tych samych klas – a CSS dopasuje całą resztę za nas.

Od czego zacząć

 

Naszą zmianę pokażemy na przykładzie

Ala ma kota a kot ma Alę
Ogólny kod CSS zastosowany dla kolumn

Wyśrodkowanie kolumn z display:inline-block

Metoda ta świetnie sprawdzi się nie tylko samodzielnie, ale również kiedy korzystamy np. z Bootstrap

Pora teraz na zastosowanie efektu

Kod CSS

Kod HTML po dodaniu klasy

Ala ma kota a kot ma Alę

W tym przypadku klasę dodajemy osobno do każdego z elementów.

Środkowanie kolumn z display: flex

Drugą metodą jest display: flex (czyli flexbox). Ponownie weźmiemy pod uwagę ten sam element:

Klasa CSS

Kod HTML po dodaniu klasy

Ala ma kota a kot ma Alę

W tym przypadku klasę dodajemy do elementu nadrzędnego.

http://www.aurainweb.pl/category/ogolne/php-ogolne/flexbox/

Oczywiście istnieją inne metody wyśrodkowywania względem siebie kolumn, powyższe jednak są bardzo proste i nie wymagają znaczących zmian w kodzie strony.


źródła:
https://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3
https://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3/25517025#25517025

dodatkowe tagi:
Wyśrodkowanie, środkowanie w pionie dwóch divów, elementów blokowych sąsiadujących, mieszczących się obok siebie względem wyższego z nich
dopasowywanie położenia div w odniesieniu, stosunku do innego
pionowe wyrównanie
środkowanie diva względem drugiego w pionie

Przeczytaj również

Dodawanie cienia do elementu HTML – CSS3 W tym wpisie pokaże wam jak w prosty sposób dodać efekt cienia pod dowolny element blokowy np. div lub obrazek. W jednym z wcześniejszych wpisów z ...
Sześciokąty rozmieszczone obok siebie CSS Jakiś czas temu odwiedziłam stronę, której autor umieściła swoje portfolio w postaci sześciokątów (hexagonu) czyli kilku sześciokątów. Zrobiło to na m...
Instalacja i konfiguracja darmowego serwera na ko... XAMPP to darmowy serwer lokalny, wydany  na licencji GNU GPL. Serwer oparty jest o apache, obsługuje PHP oraz umożliwia utworzenie bazy MySQL. Dodatk...
Dopasowywanie tekstu do kształtu obrazka – C... Jak sam tytuł mówi tym razem zajmę się dopasowaniem tekstu do kształtu obrazka, nie zrobię tego jednak w formie grafiki lecz na żywym tekście (czyli t...

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *