Bootstrap come allineare il testo in verticale in un contenitore div

Qual è il modo migliore / corretto per allineare verticalmente il testo nel mezzo della sua colonna? L’altezza dell’immagine è staticamente impostata nel CSS.

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

inserisci la descrizione dell'immagine qui

HTML

 

Link up with other gamers all over the world who share the same tastes in games.

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%; } 

HTML:

Innanzitutto, dovremo aggiungere una class al tuo contenitore di testo in modo che possiamo accedervi e adattarla di conseguenza.

 

Link up with other gamers all over the world who share the same tastes in games.

CSS:

Successivamente, applicheremo i seguenti stili per allinearlo verticalmente, in base alla dimensione del div dell’immagine accanto ad esso.

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

ESEMPIO DI LAVORO

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

Spiegazione:

La parte superiore: lo stile 50% essenzialmente spinge l’elemento di intestazione verso il basso 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 con 1 (forse 2) righe di testo poiché questo sposta semplicemente la parte superiore dell’elemento di intestazione verso il basso del 50% e quindi il resto del contenuto si riempie al di sotto di quello, il che significa che con più righe di testo sembrerebbe essere leggermente al di sotto allineato verticalmente.

Una ansible soluzione per più linee sarebbe quella di utilizzare una percentuale leggermente inferiore al 50%.

Non avresti semplicemente aggiunto:

 align-items:center; 

a una nuova class nel tuo div di fila. Essenzialmente:

 
.align_center { align-items:center; }