pantalla - centrar texto css

¿Cómo alinear un div a la parte superior de su elemento primario pero manteniendo su comportamiento de bloque en línea?

Question

Ver: http://jsfiddle.net/b2BpB/1/

P: ¿Cómo se puede hacer que box1 y box3 se alineen con la parte superior del div principal ''boxContainer''?

#boxContainerContainer {
    background: #fdd;
    text-align: center;
}

#boxContainer {
    display:inline-block;
    border:thick dotted #060;
    margin: 0px auto 10px auto;
    text-align: left;
}

#box1 {
    width: 50px;
    height: 50px;
    background: #999;
    display: inline-block;
}

#box2 {
    width: 50px;
    height: 100px;
    background: #999;
    display: inline-block;
}

#box3 {
    width: 50px;
    height: 50px;
    background: #999;
    display: inline-block;

Ayuda muy apreciada ...

Acuse de recibo: esta pregunta se bifurca de una respuesta dada previamente por https://stackoverflow.com/users/20578/paul-d-waite : Obtener un elemento CSS para redimensionar automáticamente al ancho del contenido, y al mismo tiempo centrarse

Answer 1

Como otros han dicho, vertical-align: top es tu amigo.

Como un extra aquí hay un violín con bifurcaciones con mejoras adicionales que lo hacen funcionar también en Internet Explorer 6 e Internet Explorer 7;)

Ejemplo: here

Answer 2

O simplemente podría agregar algo de contenido al div y usar inline-table

Answer 3

Pruebe la propiedad CSS de vertical-align .

#box1 {
    width: 50px;
    height: 50px;
    background: #999;
    display: inline-block;
    vertical-align: top; /* here */
}

Aplíquelo a #box3 también.

Answer 4

Puede agregar float: izquierda; para cada uno de los cuadros (box1, box2, box3).

http://jsfiddle.net/Wa4ma/

Answer 5

Use vertical-align: top; para el elemento que desea en la parte superior, como lo he demostrado en su jsfiddle.

http://www.brunildo.org/test/inline-block.html