AYUDA centrado vertical

[wiinigo]

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>

[jumps]

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

[wiinigo]

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.

[JHMorales]

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.

[wiinigo]

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.

[hq1]

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.

[wiinigo]

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

[hector_he]

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.

[wiinigo]

Si pero alineado verticalmente no horizontalmente.

Con el text-align haces la alineación horizontal.

[hector_he]

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/

[wiinigo]

Gracias por la idea.

Cuando haga las pruebas ya te comentaré si funciona.

[marcelomdsc]

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