Pregunta ¿Cómo alinear verticalmente un texto?


¿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


13
2017-07-09 04:23


origen


Respuestas:


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).

editar: O este increíble css:

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>

Me refiero a hacer una publicación de blog sobre esto por un tiempo, creo que es hora.


12
2017-07-09 04:44



Sé que esto arruinará mi reputación, pero ... use una celda de la mesa. Cualquier solución CSS de navegador cruzado para la alineación vertical será el doble de difícil de mantener, siendo optimista.


11
2017-07-09 04:33



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

10
2017-07-09 04:47



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

Lo he usado yo mismo, y funciona perfectamente.


5
2017-07-09 04:47



Me he encontrado con este problema antes. 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ía con cada página.

Fuente: aquí

Demostración: vinculado en la página anterior

Aquí va mi primera respuesta ...


2
2017-07-09 04:49



¿Has probado vertical-align: middle; ?


0
2017-07-09 04:39