Cómo centrar texto verticalmente con css

He intentado encontrar cómo centrar el texto verticalmente, pero no puedo encontrar una respuesta satisfactoria. La mejor respuesta que encontré hasta ahora es this. Esto hace que parezca que me permite centrar el texto verticalmente, pero si uso esto y agrego más texto, solo se extiende al fondo y no se vuelve a centrar, como lo que sucede horizontalmente.Cómo centrar texto verticalmente con css

Nota, estoy buscando una solución de CSS única, por lo que no javascript por favor. Nota, quiero poder agregar varias líneas de texto.

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<style type="text/css"> 
    div#maindiv { 
     width: 810px; 
     height: 99px; 
     background-color: black; 
     margin: 0px; 
     padding: 0px; 
     color: white; 
     font-family: Sans-serif; 
     text-align: center; 
     display: table; 
    } 
    div#maindiv span { 
     font-size: 1.1em; 
    } 


    div#part1 { 
     width: 270px; 
     height: 99px; 
     background-color: #6DCAF2; 
     float: left; 
     vertical-align: middle; 
     position: relative; 
    } 

    div#horizon1 { 
     background-color: green; 
     height: 1px; 
     left: 0; 
     overflow: visible; 
     position: absolute; 
     text-align: center; 
     top: 50%; 
     visibility: visible; 
     width: 100%; 
    } 

    div#content1 { 
     background-color:green; 
     height:99px; 
     width: 270px; 
     position: absolute; 
     top: -50px; 
    } 

</style> 
<title>XHTML-Strict</title> 
</head> 
<div id="maindiv"> 
<body> 
    <div id="part1"> 
     <div id="horizon1"> 
      <div id="content1"> 
       <div id="bodytext1"> 
        <span> 
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dolor augue, faucibus quis sagittis 
        <span> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
</body> 
</html>

Al final, quiero tener 3 bloques, cada uno de ellos centrando el texto en el medio. Estos textos son editados por los clientes, por lo que deben poder abarcar varias líneas. Actualmente, el texto comienza en la parte superior del cuadro y va hacia abajo, al final, quiero que el texto comience en un punto para que el centro del cuerpo del texto quede posicionado en el centro del cuadro.

Mi solución final, Nota: vertical-align no funciona si tiene flotación: queda en el mismo div.

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<style type="text/css"> 
    div#maindiv { 
     width: 810px; 
     height: 99px; 
     background-color: black; 
     margin: 0px; 
     padding: 0px; 
     color: white; 
     font-family: Sans-serif; 
    } 
    div#maindiv span { 
     font-size: 1.1em; 
    } 

    div.part { 
     width: 262px; 
     height: 99px; 
     padding: 0px; 
     margin: 0px; 
     padding: 4px; 
     border: 0px; 
     color: white; 
     text-align: center; 
     display: table-cell; 
     vertical-align: middle; 
    } 

    div.bgc1 { 
     background-color: #6DCAF2; 
    } 

    div.bgc2 { 
     background-color: #2A4B9A; 
    } 

    div.bgc3 { 
     background-color: #FF8A00; 
    } 


</style> 
<title>XHTML-Strict</title> 
</head> 
<div id="maindiv"> 
<body> 
    <div style="float: left;"> 
     <div class="part bgc1"> 
      <span> 
       Vegeta! What does the scouter say about his power level?! 
      </span> 
     </div> 
    </div> 
    <div style="float:left;"> 
     <div class="part bgc2"> 
      <span> 
       It's over NINE THOUSAAAAAAAAAND! 
      </span> 
     </div> 
    </div> 
    <div style="float:left;"> 
     <div class="part bgc3"> 
      <span> 
       What NINE THOUSAND? There is no way that can be right! 
      </span> 
     </div> 
    </div> 
</div> 
</body> 
</html>

Fuente

2012-01-03 NomenNescio

Se puede publicar su código actual? La primera pregunta es siempre: "¿en qué quieres que se centre el texto?" – ptriek

Hay una variedad de métodos disponibles aquí: http://www.vanseodesign.com/css/vertical-centering/ Si pudiera compartir el código que está utilizando, quizás podamos ayudarlo con una solución específica. –

la otra manera css es tener el texto en una celda de tabla; de lo contrario, deberá usar js – mreq

Usted puede configurar su contenedor a display:table-cell y añadir vertical-align:middle:

http://jsfiddle.net/ptriek/h5j7B/1

(Pero IE7 y a continuación se no como este ...)

Fuente

2012-01-03 15:29:36 ptriek

Además de los problemas anteriores a IE8, tampoco funciona bien en teléfonos móviles y dispositivos de mano. (además de las víctimas de Safari-Browser). Además, en realidad no centra el v-center en el texto, v-centra el contenedor secundario que luego contiene texto ... ¿pero quién quiere comenzar a contar los guisantes aquí? ;) Gran idea de todos modos ... –

Puede usar una altura de línea igual a la de su contenedor principal.

p. Ej.

<div style="height:32px;> 
    <p style="line-height:32px;">Text</p> 
</div>

Lo desea en una hoja externa de css.

Si estoy entendiendo su pregunta correctamente.

Fuente

2012-01-03 15:18:52

¿Quieres explicar los votos a la baja? Si estoy explicando algo mal, no dude en corregirlo. –

No recomendé, pero OP mencionó que se produjo un problema al agregar más texto (leer: varias líneas), y eso tampoco funcionará con tu respuesta ... – ptriek

Gracias por la respuesta. –

<div style="height:50px;line-height:50px;"> 
    Text 
</div>

Fuente

2012-01-03 15:20:52 Arrabi

Debe marcar su código HTML como código o no se mostrará directamente en su respuesta SO. – scottheckel

Estoy de acuerdo con una respuesta válida, pero hay un problema: cuando el texto comienza a envolverse horizontalmente, se "romperá" en algo feo con una altura de línea exagerada. El OP debería habernos informado: "de cuánto texto" estamos hablando. ;) –

generalmente uso esto para botones y divs con una línea de texto. – Arrabi

Bueno, hay varias soluciones.

Lo más fácil es

#centerme 
{ 
    // will center the text vertically, but looks bad with multiliners 
    line-height:20em; 
}

para multi-liners, es necesario colocar una caja-in-a-box

#parentbox 
{ 
    // we need the "parent" to have some kind of height 
    height:20em; 

    // the most important... position children "relative" to the parent 
    position:relative; 
} 

.childbox 
{ 
    position:absolute; 
    left:0; 
    top:50%; 
    margin-top:-5em; // this pulls the child back "up" to the vertical center 
}

El problema aquí es que la "altura" de su multi-liner debe ser conocido (o al menos adivinado) por lo que en realidad se centra en vertical.

LO QUE NECESITA SABER

No hay manera CSS puro saber acerca de la altura de un elemento, que luego nos permitirá centrar verticalmente de una manera "adaptativa"!

Esto significa que cuando cambie el texto, también debe cambiar el CSS para asegurarse de que todo sigue encajando.

Esto puede ser molesto y ahí es donde y por qué la mayoría de la gente recurre al uso de javascript para evitar esta molestia de CSS de "una característica que falta". Al final, JavaScript lo hace más fácil para todos nosotros (al menos en este tipo de casos).

MÁS

Hay una gran cantidad de Q & A sobre esta pasando alrededor de la web y alrededor de este sitio web.En caso de que los echaba de menos, he aquí algunas:

y hay hay muchos más; todos proporcionan soluciones individuales para casos individuales. Eso te ayudará a tener un poco más de confianza (ya que inicialmente dijiste que eres nuevo en este tipo de violín de CSS).

Fuente

2012-01-03 15:22:45

Cómo centrar texto verticalmente con css

Respuesta

Cuestiones relacionadas