Bootstrap come allineare il testo all'allineamento verticale in un contenitore div

Question

Qual è il modo migliore/corretto per allineare verticalmente il testo al centro della colonna? L'altezza dell'immagine è staticamente impostata nel CSS.

Ho provato a impostare un div esterno a display: table e un div interno a display: table-cell con vertical-align: middle ma anche questo non ha funzionato.

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:

Per prima cosa, dovremo aggiungere una classe al tuo contenitore di testo in modo che possiamo accedervi e adattarla di conseguenza.

<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:

Successivamente, si applicano le seguenti stili di allineare verticalmente, a seconda delle dimensioni del div immagine accanto ad essa.

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

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

Tutto fatto! Regola l'altezza della linea e l'altezza degli stili sopra se ritieni che sia ancora leggermente fuori allineamento.

WORKING EXAMPLE

Answer 2

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

Spiegazione:

Il superiore: 50% stile spinge essenzialmente l'elemento di intestazione in calo del 50% dalla parte superiore dell'elemento genitore. Anche gli stili translateY agiscono in modo simile spostando l'elemento in basso del 50% dall'alto.

Si noti che questo funziona bene per le intestazioni di 1 (forse 2) righe di testo come questo sposta semplicemente il superiore dell'elemento dell'intestazione giù 50% e quindi il resto del contenuto riempie sotto, il che significa quello con più righe di testo sembrerebbe essere leggermente al di sotto allineato verticalmente.

Una possibile soluzione per più righe consisterebbe nell'utilizzare una percentuale leggermente inferiore al 50%.

Answer 3

Potrebbe non hanno semplicemente aggiunto:

align-items:center; 

ad una nuova classe nella vostra div fila. In sostanza:

<div class="row align_center"> 

.align_center { align-items:center; }