Foros del Web » Creando para Internet » CSS »

alineado vertical..

Estas en el tema de alineado vertical.. en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 18/06/2008, 16:37
Avatar de lbenz  
Fecha de Ingreso: marzo-2003
Ubicación: Haedo
Mensajes: 445
Antigüedad: 14 años, 8 meses
Puntos: 4
alineado vertical..

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...
__________________
que fea firma que tenia... prefiero tener esto
  #2 (permalink)  
Antiguo 19/06/2008, 03:57
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Respuesta: alineado vertical..

Pues dentro de ese div, pones otro así que contenga tu texto:
Código HTML:
<div style="line-height: 200px">Texto</div> 
  #3 (permalink)  
Antiguo 19/06/2008, 04:14
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: alineado vertical..

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.
  #4 (permalink)  
Antiguo 19/06/2008, 04:36
 
Fecha de Ingreso: marzo-2008
Mensajes: 306
Antigüedad: 9 años, 8 meses
Puntos: 6
Respuesta: alineado vertical..

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>
__________________
Pop & Rock Bands
Pop Music Stars
  #5 (permalink)  
Antiguo 19/06/2008, 05:17
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Respuesta: alineado vertical..

Gracias Mikmoro por corregirme .
  #6 (permalink)  
Antiguo 19/06/2008, 05:43
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: alineado vertical..

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.
  #7 (permalink)  
Antiguo 19/06/2008, 16:41
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: alineado vertical..

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>
<!--[if IE]><style>#dos {position: absolute; top: 50%;}#tres {top: -50%;}</style><![endif]-->
</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.
  #8 (permalink)  
Antiguo 19/06/2008, 16:52
 
Fecha de Ingreso: marzo-2008
Mensajes: 306
Antigüedad: 9 años, 8 meses
Puntos: 6
Respuesta: alineado vertical..

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.
__________________
Pop & Rock Bands
Pop Music Stars
  #9 (permalink)  
Antiguo 19/06/2008, 17:04
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: alineado vertical..

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.
  #10 (permalink)  
Antiguo 20/06/2008, 07:56
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: alineado vertical..

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)  
Antiguo 20/06/2008, 10:14
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: alineado vertical..

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.
  #12 (permalink)  
Antiguo 20/06/2008, 10:48
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: alineado vertical..

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)  
Antiguo 20/06/2008, 10:52
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: alineado vertical..

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.
  #14 (permalink)  
Antiguo 20/06/2008, 10:57
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: alineado vertical..

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.
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 18:36.