¿Cómo alinear verticalmente un texto?

Question

¿Cómo alinear verticalmente el texto en un div flotante? Por ejemplo: tengo un contenido dinámico con altura fija. si el contenido es pequeño o grande, tiene que alinearse verticalmente automáticamente.

Gracias

Answer 1

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

Javascript es una alternativa (mida el tamaño y el tamaño del texto del div, luego ajuste el relleno, o la altura de línea, o lo que sea).

edición: 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 ... utilizan una celda de la tabla. Cualquier solución CSS de navegador cruzado para la alineación vertical será el doble de difícil de mantener, siendo optimista.

Answer 3

¿Has probado vertical-align: middle; ?

Answer 4

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

Answer 5

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

que he utilizado yo mismo, y funciona perfectamente.

Answer 6

Me he encontrado con este problema antes. Voy a citar a los expertos para que no lo mezcle: "... el objeto interno está absolutamente posicionado en la mitad de la altura del área. Luego se mueve hacia arriba a la mitad de su altura".

Todo esto puede hacerse con% en lugar de píxeles exactos, en caso de que los datos se generen a partir de una base de datos y la altura varíe con cada página.

Fuente: here

Demostración: vinculada de la página anterior

Aquí va mi primera respuesta ...