Foros del Web » Creando para Internet » CSS »

Alinear texto verticalmente

Estas en el tema de Alinear texto verticalmente en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/03/2011, 21:31
 
Fecha de Ingreso: octubre-2009
Ubicación: Santa Fe
Mensajes: 194
Antigüedad: 8 años, 2 meses
Puntos: 7
Pregunta Alinear texto verticalmente

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?
__________________
Fondos de pantalla
Juegos Gratis
  #2 (permalink)  
Antiguo 20/03/2011, 22:24
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 6 años, 9 meses
Puntos: 192
Respuesta: Alinear texto verticalmente

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
  #3 (permalink)  
Antiguo 21/03/2011, 09:55
 
Fecha de Ingreso: octubre-2009
Ubicación: Santa Fe
Mensajes: 194
Antigüedad: 8 años, 2 meses
Puntos: 7
Respuesta: Alinear texto verticalmente

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!!!!
__________________
Fondos de pantalla
Juegos Gratis

Etiquetas: alinear, vertical
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:50.