html - texto - Centrar verticalmente múltiples cajas con CSS

centrar verticalmente css

Question

Necesito centrar verticalmente múltiples cajas con diferentes alturas.

No sé la altura de las cajas ya que son textos variables.

¿Cómo puedo hacer esto con CSS (sin tener que usar td y valign)? display: table-cell probada display: table-cell pero parece no ser compatible con IE

La imagen de abajo muestra el diseño, el post-it es la ventana del navegador.

eliminado link de ImageShack muerto

Answer 1

No es tan elegante, pero funciona. Crear una tabla de una celda. Solo la tabla tiene cross-browser vertical-align.

Answer 2

Suponiendo que desea que las cajas tengan un ancho fijo, puede utilizar el siguiente marcado

<div class="vcontainer">
    <span>1<br/>2</span>
    <span>1<br/>2<br/>3<br/>4</span>
    <span>1<br/>2<br/>3</span>
</div>

con estos estilos

.vcontainer {
    text-align: center;
}

.vcontainer span {
    display: inline-block;
    width: 150px;
    vertical-align: middle;
}

La propiedad de inline-block funciona en la mayoría de los navegadores modernos .