Foros del Web » Creando para Internet » CSS »

AYUDA centrado vertical

Estas en el tema de AYUDA centrado vertical en el foro de CSS en Foros del Web. Hola, no soy capaz de centrar verticalmente el texto en un div. he probado con vertical-align, margin: auto y todo lo que se me ha ...
  #1 (permalink)  
Antiguo 25/05/2007, 14:08
 
Fecha de Ingreso: mayo-2007
Mensajes: 10
Antigüedad: 10 años, 6 meses
Puntos: 1
Pregunta AYUDA centrado vertical

Hola,
no soy capaz de centrar verticalmente el texto en un div.

he probado con vertical-align, margin: auto y todo lo que se me ha ocurrido pero no hay forma.

Alguien me puede ayudar?

Gracias.

CODIGO
-------------

<style type="text/css">

a {COLOR: #000000; TEXT-DECORATION: none}

.alerta {border:1px solid #000000; background-color: #eeeeee;}

.alerta_txt {text-align:left; padding: 2px; }

.alerta_txt a {COLOR: #000000; FONT: normal 11px Tahoma,Verdana, Arial, Helvetica;}

.alerta_tit { float:left; margin-right:5px; padding: 2px; background-color: #cc0000;}

.alerta_tit a {COLOR: #ffffff; FONT: normal 20px "Trebuchet MS",Tahoma,Verdana, Arial, Helvetica;}

.limpiar {clear:both;}

</style>


<div class='alerta'>
<div class='alerta_tit'>
<a href='/enlace' target='_blank' >TITULO<p>DOS LINEAS</a>
</div>
<div class='alerta_txt'>
<a href='/enlace'>Aqui va el texto que quiero que salga alineado verticalmente</a>
</div>
<div class='limpiar'></div>
</div>
  #2 (permalink)  
Antiguo 26/05/2007, 18:35
 
Fecha de Ingreso: mayo-2007
Mensajes: 20
Antigüedad: 10 años, 6 meses
Puntos: 1
Re: AYUDA centrado vertical

Podrias poner el código a alinear dentro de una table:

Código:
<div class='alerta'>
<div class='alerta_tit'>
<a href='/enlace' target='_blank' >TITULO<p>DOS LINEAS</a>
</div>
<div class='alerta_txt'>
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td valign="center" align="center">
<a href='/enlace'>Aqui va el texto que quiero que salga alineado verticalmente</a>
</td>
</tr>
</div>
<div class='limpiar'></div>
</div>
Con height i width en función del codigo.

Saludos
  #3 (permalink)  
Antiguo 28/05/2007, 14:10
 
Fecha de Ingreso: mayo-2007
Mensajes: 10
Antigüedad: 10 años, 6 meses
Puntos: 1
Re: AYUDA centrado vertical

Precisamente lo que quiero evitar es hacer tablas.

La duda es si hay forma de hacerlo con CSS.

De todas formas, muchas gracias por contestarme.
  #4 (permalink)  
Antiguo 28/05/2007, 17:32
 
Fecha de Ingreso: abril-2007
Mensajes: 232
Antigüedad: 10 años, 7 meses
Puntos: 2
Re: AYUDA centrado vertical

Hola:
prueba a darle un height al div alerta_txt y el mismo valor al line-height del texto que va en el. Tal que así...

.alerta_txt {text-align:left; padding: 2px; height: 2em; }

.alerta_txt a {COLOR: #000000; FONT: normal 11px Tahoma,Verdana, Arial, Helvetica; line-height: 2 em; }

Suerte. Jorge H.
  #5 (permalink)  
Antiguo 29/05/2007, 12:32
 
Fecha de Ingreso: mayo-2007
Mensajes: 10
Antigüedad: 10 años, 6 meses
Puntos: 1
Re: AYUDA centrado vertical

Esta solución sólo me serviría si el texto ocupase una línea en el div.

Yo intento alinear verticalmente un texto en un div y no hay forma.
La idea es que se comporte igual que el clásico valign=’middle’ de las tablas, que con independencia de las lineas de texto deje el mismo espacio por encima y por debajo del div.
  #6 (permalink)  
Antiguo 31/05/2007, 10:05
hq1
 
Fecha de Ingreso: abril-2007
Ubicación: Madrid, España
Mensajes: 107
Antigüedad: 10 años, 7 meses
Puntos: 0
Re: AYUDA centrado vertical

No se si te he entendido bien, pero en realidad, el div se ajusta en altura a lo que ocupa el texto, por lo que no necesitarias alinearlo verticalmenre.
__________________
Proyecto de revista digital:

www.elcampamentobase.es
  #7 (permalink)  
Antiguo 31/05/2007, 10:34
 
Fecha de Ingreso: mayo-2007
Mensajes: 10
Antigüedad: 10 años, 6 meses
Puntos: 1
Re: AYUDA centrado vertical

El problema está en que tengo 2 divs flotando dentro de un tercero con un borde y el texto está dentro de uno de ellos.

El tamaño de los divs internos es variable en función del texto que en ellos aparezca.

He intentado subir una imagen pero no me deja por no tener permisos de antigüedad.

Puedes ver el ejemplo en esta dirección.

es.geocities.com/generacionm/caja.gif
  #8 (permalink)  
Antiguo 01/06/2007, 16:21
Avatar de hector_he  
Fecha de Ingreso: agosto-2006
Ubicación: Barcelona
Mensajes: 207
Antigüedad: 11 años, 3 meses
Puntos: 4
Re: AYUDA centrado vertical

Es decir que el texto esté en el centro de la caja de color gris?
Pero .alerta_txt tiene text-align:left, y si lo cambias por center?

Creo que no lo he entendido, perdón.
  #9 (permalink)  
Antiguo 04/06/2007, 04:52
 
Fecha de Ingreso: mayo-2007
Mensajes: 10
Antigüedad: 10 años, 6 meses
Puntos: 1
Re: AYUDA centrado vertical

Si pero alineado verticalmente no horizontalmente.

Con el text-align haces la alineación horizontal.
  #10 (permalink)  
Antiguo 04/06/2007, 07:43
Avatar de hector_he  
Fecha de Ingreso: agosto-2006
Ubicación: Barcelona
Mensajes: 207
Antigüedad: 11 años, 3 meses
Puntos: 4
Re: AYUDA centrado vertical

A, ok. Por lo que he leido se tien que utilizar la propiedad display: table con display: table-cell y un hack...

http://www.csslab.cl/2007/01/12/cent...tical-con-css/
  #11 (permalink)  
Antiguo 06/06/2007, 07:16
 
Fecha de Ingreso: mayo-2007
Mensajes: 10
Antigüedad: 10 años, 6 meses
Puntos: 1
Re: AYUDA centrado vertical

Gracias por la idea.

Cuando haga las pruebas ya te comentaré si funciona.
  #12 (permalink)  
Antiguo 07/06/2007, 14:06
Avatar de marcelomdsc  
Fecha de Ingreso: junio-2007
Ubicación: Windsor, California.
Mensajes: 706
Antigüedad: 10 años, 6 meses
Puntos: 8
Re: AYUDA centrado vertical

sino me equivoco, solo tenes un div y el texto adentro. algo como...

<div class="centered">
<p>texto aqui</p>
</div>

y...

talvez una forma mejor sea a "centered" darle padding top y bottom grandes com 100px dependiendo del tamano del div y la cantidad de texto (eso daria la impresion como si el texto flotara en el centro)

o....dentro de "centered" crear otro contenedor y darle un height y margin:auto en top y bottom
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 03:52.