alineado vertical..

lbenz · #1 (**permalink**) 18/06/2008, 15:37

hola... les pregunto...

al algun estilo para alinear texto verticalmente dentro de una div...

tal como text-align: center que alinea horizontalmente

tengo una div de 200px de alto, quiero que el texto que este dentro quede centrado verticalmente.

gracias, espero que me puedan ayudar...

Raulmmmm · #2 (**permalink**) 19/06/2008, 02:57

Pues dentro de ese div, pones otro así que contenga tu texto:

Código HTML:

<div style="line-height: 200px">Texto</div>

Mikmoro · #3 (**permalink**) 19/06/2008, 03:14

Pero para eso tendría que ser un texto de sólo una línea, porque si tiene más de una es un desastre, ya que cada línea tendrá por herencia ese mismo alto.

Mikel.

00siete · #4 (**permalink**) 19/06/2008, 03:36

En la siguiente página tienes varias soluciones: http://www.student.oulu.fi/~laurirai/www/css/middle/

Pero sinceramente, yo encuentro mucho más facil algo que funciona en todos los navegadores: una tabla de una una única celda:

Código:

<div style="height:200px;"
  <table><tr><td style="vertical-align:middle;">Tu texto...</td></tr></table>
</div>

Raulmmmm · #5 (**permalink**) 19/06/2008, 04:17

Gracias Mikmoro por corregirme

.

Mikmoro · #6 (**permalink**) 19/06/2008, 04:43

No corregirte, es que con una sola línea, como un enlace o así, es la mejor solución, pero cuando es dinámico y no sabes cuántas habrá, ayer mismo estuve dándole vueltas, porque tengo hace tiempo una solución pero es un poco enrevesada.

Mikel.

Mikmoro · #7 (**permalink**) 19/06/2008, 15:41

Hay varias maneras de conseguir un centrado vertical, y de momento esta es la mejor que he conseguido:

Cita:

<!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" lang="es-es">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
<title>Centrado Vertical</title>
<style>
#uno {display: table; height: 200px; border: 1px solid #f00; position: relative;width: 200px;}
#dos {display: table-cell; vertical-align: middle;}
#tres {border: 1px solid #0f0; position: relative;}
</style>

</head>
<body>
<div id="uno">
<div id="dos">
<div id="tres">
Texto de prueba, más texto de prueba, otro texto de prueba y el último texto de prueba
</div>
</div>
</div>
</body>
</html>

Mira a ver si la idea te sirve. Mientras seguiré probando cosas.

Mikel.

00siete · #8 (**permalink**) 19/06/2008, 15:52

Pues si Mike que es un experto de CSS la mejor forma que ha conseguido (de momento) es con 2 divs anidados y CSS condicional para ambos ... me reafirmo en que es mucho mas fácil con una tabla de una única celda, aunque reconozco que es una chapuza.

Mikmoro · #9 (**permalink**) 19/06/2008, 16:04

Todo se andará

Como bien sabes el problema está en el estúpido explorer, porque en el resto de los que he probado con el display table y table-cell funciona perfectamente es decir, ningún otro de los probados necesita tonterías para dibujar corectamente las cosas.

Conozco otro par de trucos, otro también con comentarios condicionales y otro más sin ellos. Y aunque tuviera que usar lo comentarios, prefiero hacerlo antes que usar tablas para maquetarlo. No es culpa de CSS, ni de HTML, ni de nadie más que del de siempre.

Mikel.

Mikmoro · #10 (**permalink**) 20/06/2008, 06:56

Algo más limpio, y que sigue validando tanto xhtml como css:

Cita:

<!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" lang="es-es">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Centrado Vertical</title>
<style type="text/css">
#caja {display: table;
height: 200px;
width: 200px;
border: 1px solid #f00;
position: relative;
}
.centrado {display: table-cell;
vertical-align: middle;
margin: 0 auto;
padding: 0 10px;
}
.texto {position: relative;
top: -50%;
display: block;
}
</style>
</head>
<body>
<div id="caja">
<div class="centrado" style="*position: absolute;*top: 50%;">
<span class="texto">
Texto de prueba, más texto de prueba, otro texto de prueba y el último texto de prueba
</span>
</div>
</div>
</body>
</html>

Mikel.

#11 (**permalink**) 20/06/2008, 09:14

A ver si puedo aportar un granito de arena...
http://alvlin.com/articulos/16-centr...rtical-con-css

Los ejemplos están pensados para centrar bloques, pero si se quiere centrar un párrafo de texto, basta centrar el párrafo

table-cell.... no lo había pensado... quizás haya que investigar eso

Saludos.

Mikmoro · #12 (**permalink**) 20/06/2008, 09:48

Hola, Alvlin.

Creo que el problema principal de este asunto es no conocer el tamaño de la caja de texto, porque si la conocemos, siempre podemos usar el sencillo método de poner un top: 50% y un margen superior negativo (margin-top: -mitad del tamaño de la caja).

Pero cuando el contenido es dinámico y no se puede establecer la altura la cosa se complica.

Quizá quien hizo la consulta (del que nunca más se supo), tenía una caja de textocon una altura definida y hace dos días que estoy hablando y buscando de más.

Mikel.

#13 (**permalink**) 20/06/2008, 09:52

Muy cierto... en mi opinión el problema es el comportamiento un tanto "extraño" de vertical-align, que está ahí pero en la mayoría de los casos no funciona como se espera.

Si hiciera en todos los casos lo que uno espera de una propiedad con ese nombre, sería bastante más fácil...

Saludos.

Mikmoro · #14 (**permalink**) 20/06/2008, 09:57

Pues sí. Creo haber leído que en CSS3 el vertical-align se va a comportar como se espera en todos los display. Otra cosa es cómo lo implementen lo navegadores, y en especial el "innombrable".

Mikel.