vertical-alinear: medio no funciona

Question

La propiedad css vertical-align: middle no funciona en este ejemplo.

HTML:

<div> 
    <span class='twoline'>Two line text</span> 
    <span class='float'> Float right </span> 
</div> 

CSS:

.float { 
    float: right; 
} 

.twoline { 
    width: 50px; 
    display: inline-block; 
} 

div { 
    border: solid 1px blue; 
    vertical-align: middle; 
} 

El span que está flotando a la derecha no está centrada verticalmente con respecto a su div que contiene. ¿Cómo puedo tenerlo verticalmente centrado?

El código anterior está en this fiddle.

Answer 1

Debe envolver su elemento en table-cell, dentro de table usando display.

De esta manera:

<div> 
    <span class='twoline'>Two line text</span> 
    <span class='float'>Float right</span> 
</div> 

y

.float { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: right; 
} 
.twoline { 
    width: 50px; 
    display: table-cell; 
} 
div { 
    display: table; 
    border: solid 1px blue; 
    width: 500px; 
    height: 100px; 
} 

Se muestra aquí: http://jsfiddle.net/e8ESb/7/

Answer 2

La alineación vertical no funciona del modo que usted desea. Ver: http://phrogz.net/css/vertical-align/index.html

Esto no es bonito, pero HARÁ lo que quieras: la alineación vertical se comporta como se esperaba solo cuando se usa en una celda de la tabla.

http://jsfiddle.net/e8ESb/6/

hay otras alternativas: Se puede declarar cosas como tablas o celdas de la tabla dentro de CSS para hacer que se comporten como se desee, por ejemplo. Los márgenes y el posicionamiento a veces se pueden jugar para obtener el mismo efecto. Ninguna de las soluciones es terriblemente bonita, sin embargo.

Answer 3

La respuesta dada por Matt K funciona perfectamente bien.

Sin embargo, es importante tener en cuenta una cosa: Si el div que está aplicando tiene un posicionamiento absoluto, no funcionará. Para que funcione, hacer esto -

<div style="position:absolute; hei..."> 
    <div style="position:relative; display: table-cell; vertical-align:middle; hei..."> 
     <!-- here position MUST be relative, this div acts as a wrapper--> 
     ... 
    </div> 
</div> 

Answer 4

deberá ajustar un valor fijo a la propiedad de su período de line-height:

.float, .twoline { 
    line-height: 100px; 
}