Bootstrap, jak uzyskać wyrównanie w pionie tekstu w pojemniku div

Question

Jaki jest najlepszy/właściwy sposób pionowego wyrównania tekstu w środku jego kolumny? Wysokość obrazu jest ustawiona statycznie w CSS.

Próbowałem ustawić zewnętrzne div na display: table i wewnętrzny div na display: table-cell z vertical-align: middle, ale to też nie działa.

HTML

<section id="browse" class="browse"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-5 col-sm-5"> 
       <h2 class="text-left">Link up with other gamers all over the world who share the same tastes in games.</h2> 
      </div> 
      <div class="col-md-1"></div> 
      <div class="col-md-6 col-sm-7 animation_container"> 
       <img id="animation_img2" class="animation_img animation_img2" src="images/section2img2.png"/> 
       <img id="animation_img1" class="animation_img animation_img1" src="images/section2img1.png"/> 
      </div> 
     </div> 
    </div> 
</section> 

CSS

.browse .container, .blind_dating .container { padding-bottom: 0; } 
.animation_container { position: relative; } 
.browse .animation_container { height: 430px; } 
.animation_img { position: absolute; bottom: 0; } 
.animation_img1 { right: 25%; } 
.animation_img2 { right: 25%; } 

Answer 1

HTML:

Po pierwsze, będziemy musieli dodać klasę do kontenera tekstowego, abyśmy mogli uzyskać do niej dostęp i nadać jej odpowiedni styl.

<div class="col-xs-5 textContainer"> 
    <h3 class="text-left">Link up with other gamers all over the world who share the same tastes in games.</h3> 
</div> 

CSS:

Następnie będziemy stosować następujące style, aby wyrównać ją pionowo, w zależności od wielkości div zdjęciu obok.

.textContainer { 
    height: 345px; 
    line-height: 340px; 
} 

.textContainer h3 { 
    vertical-align: middle; 
    display: inline-block; 
} 

Wszystko gotowe! Dostosuj wysokość i wysokość linii do powyższych stylów, jeśli uważasz, że nadal jest trochę poza linią.

WORKING EXAMPLE

Answer 2

h2.text-left{ 
    position:relative; 
    top:50%; 
    transform: translateY(-50%); 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
} 

Objaśnienie:

górna 50% styl zasadniczo popycha element kierujący poziom 50% w stosunku do górnej części elementu nadrzędnego. Wersje translateY działają również w podobny sposób, przesuwając element o 50% w górę.

Należy zauważyć, że działa to dobrze w nagłówkach z 1 (może 2) liniami tekstu, ponieważ po prostu przesuwają one top elementu nagłówka w dół o 50%, a następnie reszta zawartości wypełnia się poniżej, co oznacza że w przypadku wielu linii tekstu wydaje się, że jest nieco poniżej wyrównania w pionie.

Ewentualną poprawką dla wielu linii byłoby użycie wartości procentowej nieco mniejszej niż 50%.

Answer 3

Nie mogłeś po prostu dodał:

align-items:center; 

do nowej klasy w swoim wierszu div. Zasadniczo:

<div class="row align_center"> 

.align_center { align-items:center; }