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

Czas czytania: 2 minut

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.

Wyśrodkowanie zawartości kolumn

Umiejętność ta może przydać nam się np. kiedy chcemy

• obok dużego obrazka, grafiki umieścić wyśrodkowany w pionie tekst,
• długiego tekstu umieścić wyśrodkowaną w pionie grafikę,
• wyśrodkować dwa lub kilka tekstów względem siebie w różnych kolumnach

W praktyce więc w kolumnie z mniejszą zawartością pojawią się wolna przestrzeń.

Czyli chcemy wyrównać je w pionie względem siebie nawzajem. 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.

Wyrównanie zawartości kolumn z display: inline-block

Pierwszą metodą jaką pokaże świetnie sprawdzi się nie tylko samodzielnie, ale również kiedy korzystamy np. z Bootstrap. Będzie ona stosunkowo prosta, ale będzie ona od nas wymagać dodania odpowiedniej klasy do obu kolumn. Będzie się ona prezentować następująco:

Kod CSS

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

Przykład, wyśrodkowanie tekstu względem obrazu i obrazu względem tekstu w pionie:

See the Pen
Center by Aura (@Julka85)
on CodePen.

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

Środkowanie contentu w kolumnach z display: flex

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

Klasa CSS wyrównująca zawartość kolumn

.vertical-align {
    display: flex;
    align-items: center;
}

przykład – RWD:

See the Pen
Flex center by Aura (@Julka85)
on CodePen.

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

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, wyśrodkowane względem siebie elementów z kolumn
dopasowywanie położenia div w odniesieniu, stosunku do innego
pionowe wyrównanie, element i tekst razem wyśrodkowane względem siebie
środkowanie diva względem drugiego w pionie