Alinear texto verticalmente

alvaro0022 · #1 (**permalink**) 20/03/2011, 20:31

Hola;

Seguramente a algunos le pareza una pregunta estupida pero he buscado por todos lados y no logro encontrar algo que funcione o como hacer para alinear texto verticalemente en css.

Algien sabe como hacerlo?

Naahuel · #2 (**permalink**) 20/03/2011, 21:24

Bueno un método conocido es, conociendo la altura de su conenedor, usar:
line-height:<altura-de-su-contenedor>px
Es decir la altura de cada línea de texto tendrá la misma altura que el contenedor, lo que hará que el texto se vea centrado. Esto sólo sirve para una sóla línea, no un párrafo.

Alinear un párrafu suele ser más problemático, pues requiere un poco más de trabajo para hacer funcionar en todos los navegadores. Un método común es usar vertical-align:middle a un contenedor con display:table-cell;:

Código HTML:

<style>
  .parrafo-centrado{
    display:table;
    background:yellow;
    width:200px;
    height:400px;
  }
  .parrafo-centrado p{
    display:table-cell;
    vertical-align:middle;
  }
</style>
</head>
<body>
  <div class="parrafo-centrado">
  <p>Hello World Hello World Hello World Hello World Hello World Hello WorldHello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World  </p>
  </div>
</body>

Tenés que trabajar un poquito para ajustarlo lo mejor posible en los diferentes navegadores, de IE7 (inclusive) para abajo esta propiedad no está soportada.
Ejemplo anterior:
http://jsbin.com/oqovu5

alvaro0022 · #3 (**permalink**) 21/03/2011, 08:55

Gracias por tu respuesta Naahuel!!

Utilice el metodo (line-height:<altura-de-su-contenedor>px) ya que es solo una linea de texto.

Saludos y nuevamente gracias!!!!