Allinea verticalmente il testo all'interno dell'elemento div

Question

So che questa domanda è stata posta a morte ma nulla tramite la ricerca ha funzionato per me.

Si conosce l'accordo, ho un elemento div che ho bisogno di allineare verticalmente il testo ma non ha funzionato (posizione: assoluta; top: 50%; margin-top: -x; display: table-cell; verticale -align: middle; ecc., ecc.)

Ecco a cosa sto lavorando (mi dispiace per il CSS in linea). Ad ogni modo, io userei l'altezza della linea, ma il testo può essere di una o due righe. Dovrebbe essere allineato verticalmente con l'immagine che è sempre di altezza massima di 30 px (30x50).

<div style="margin:0 0 10px 0;padding:10px;border:2px solid #606060;background-color:#2b2b2b;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;"> 
<div style="float:left;width:55px;height:40px;"> 
<a href="link"><img style="max-width:50px;border:1px solid #ffb92c;" src="image.jpg" alt="" /></a> 
</div> 
<div style="float:right;width:155px;font-size:0.7em;height:40px;"> 
<a href="link">This is the text to vertically align</a> 
</div> 
</div> 

Answer 1

L'idea è da here e dovrebbe funzionare per tutti i browser.

<div style="margin: 0 0 10px 0; padding: 10px; border: 2px solid #606060; background-color: #2b2b2b; 
    -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;"> 
    <div style="float: left; width: 55px; height: 40px;"> 
     <a href="link"> 
      <img style="max-width: 50px; border: 1px solid #ffb92c;" src="image.jpg" 
       alt="" /></a> 
    </div> 
    <div style="float: right; width: 155px; font-size: 0.7em; height: 40px; display: table; #position: relative; overflow: hidden;"> 
     <div style="#position: absolute; #top: 50%; display: table-cell; vertical-align: middle;"> 
      <div style="#position: relative; #top: -50%;"> 
       <a href="link">This is the text to vertically align</a> 
      </div> 
     </div> 
    </div> 
    <div style="clear: both"></div> 
</div> 

Answer 2

Hai bisogno di fare in questo modo:

http://jsfiddle.net/rathoreahsan/5u9HY/

Uso fixed height invece di padding in div principale. e usa l'altezza della linea a sinistra & right Div

Answer 3

Sembra un problema float comune che può essere risolto con un clearfix o, come ho fatto nel seguente frammento di codice, con un'altezza fissa del wrapper.

Ho anche seduto un line-height dei div flottanti e l'ho reso un po 'più ampio.

Date un'occhiata a questo:

<div style="margin:0 0 10px 0;padding:10px;border:2px solid #606060;background-color:#2b2b2b;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;height:40px"> <div style="float:left;width:55px;height:40px;"> <a href="link"><img style="max-width:50px;border:1px solid #ffb92c;" src="image.jpg" alt="" /></a> </div> <div style="float:right;width:185px;font-size:0.7em;height:40px;line-height:40px"> <a href="link">This is the text to vertically align</a> </div> </div> 

http://jsfiddle.net/YqxPZ/3/

Answer 4

Un altra cosa che si può fare. Se si tratta di una sola riga di testo nel div è possibile utilizzare line-height

esempio

div { 
    line-height:40px; 
} 

Answer 5

Ecco una versione pulita della soluzione

<div style="background: yellow"> 
<div style="width: 155px; font-size: 0.7em; height: 40px; display: table; overflow: hidden;"> 
    <div style="display: table-cell; vertical-align: middle;"> 
     <div style=""> 
      <a href="link">This is the text to vertically align</a> 
     </div> 
    </div> 
</div> 
<div style="clear: both"></div> 

http://jsfiddle.net/5y4Nb/

Answer 6

È necessario mostrare solo alcune righe di una l ong text, ecco lo Fiddle. Regolare l'altezza in base alle necessità.

.container-text { 
    height:40px; 
    width:180px; 
    overflow-y:hidden;  
    display:table-cell; 
    vertical-align:middle; 
    text-align: center; 
}