¿Cómo alinear vertical de un texto?

Question

¿Cómo alinear verticalmente el texto en un div flotaba? Por ejemplo: Tengo un contenido dinámico con altura fija. si el contenido es pequeño o grande que tiene para alinear verticalmente de forma automática.

Gracias

Answer 1

celdas de la tabla son la solución más fácil.

Javascript es una alternativa (medir el tamaño tamaño y texto del div, a continuación, ajustar el relleno, o lineHeight, o lo que sea).

Edit: O esto css impresionante:

CSS

div#container {
    border: solid 1px;
    height: 300px;
}

div#content {
    border: solid 1px;
}

div#balance {
    border: solid 1px;
    /* gotta be 100% */
    height: 100%;
}

div.valign {
    /* firefox 2 */
    display: -moz-inline-box;
    /* everybody else */
    display: inline-block;

    vertical-align: middle;
}

/* IE 6 and 7 hack */
html* div.valign {
    display: inline;
}

HTML

<div id="container">
    <div id="balance" class="valign"></div>
    <div id="content" class="valign">
        Blah blah blah blah<br/>
        Blah blah blah blah<br/>
        Blah blah blah blah<br/>
        Blah blah blah blah<br/>
        Blah blah blah blah
    </div>
</div>

tenido la intención de hacer un post sobre esto durante un tiempo, creo que es el momento.

Answer 2

Sé que esto va a arruinar mi reputación, pero ... uso una celda de la tabla. Cualquier solución CSS multi-navegador para la alineación vertical será dos veces más difícil de mantener, ser optimista.

Answer 3

<div style="display: table-cell; vertical-align: middle;">I'm in the middle!</div>

Answer 4

Chris Coyier escribió un excelente tutorial sobre esto: http: // CSS -tricks.com/vertically-center-multi-lined-text/

he utilizado yo mismo, y funciona perfectamente.

Answer 5

Me he encontrado con este problema antes. Voy a citar a los expertos por lo que no Fudge esto: "... objeto interno está absolutamente posicionado en la mitad de la altura de la zona. A continuación, se mueve hacia arriba a la mitad de su altura."

Esto puede ser todo hecho con% en lugar de píxeles exactos, en caso de que se generan los datos de una base de datos y la altura varía con cada página.

Fuente: aquí

Demostración: vinculada de la página anterior

Aquí va mi primera respuesta ...

Answer 6

¿Ha tratado vertical-align: media; ?