Retroceder   Foros del Web > Diseño de Sitios web > CSS

Respuesta
 
Herramientas Desplegado
Antiguo 25-may-2007, 13:08   #1 (permalink)
wiinigo ha deshabilitado el karma
 
Fecha de Ingreso: mayo-2007
Mensajes: 9
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>
wiinigo está desconectado   Responder Citando
Antiguo 26-may-2007, 17:35   #2 (permalink)
jumps ha deshabilitado el karma
 
Fecha de Ingreso: mayo-2007
Mensajes: 19
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
jumps está desconectado   Responder Citando
Antiguo 28-may-2007, 13:10   #3 (permalink)
wiinigo ha deshabilitado el karma
 
Fecha de Ingreso: mayo-2007
Mensajes: 9
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.
wiinigo está desconectado   Responder Citando
Antiguo 28-may-2007, 16:32   #4 (permalink)
JHMorales ha deshabilitado el karma
 
Fecha de Ingreso: abril-2007
Mensajes: 225
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.
JHMorales está desconectado   Responder Citando
Antiguo 29-may-2007, 11:32   #5 (permalink)
wiinigo ha deshabilitado el karma
 
Fecha de Ingreso: mayo-2007
Mensajes: 9
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.
wiinigo está desconectado   Responder Citando
Antiguo 31-may-2007, 09:05   #6 (permalink)
hq1
hq1 no se puede cailificar en este momento
 
Fecha de Ingreso: abril-2007
Ubicación: Madrid, España
Mensajes: 107
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
hq1 está desconectado   Responder Citando
Antiguo 31-may-2007, 09:34   #7 (permalink)
wiinigo ha deshabilitado el karma
 
Fecha de Ingreso: mayo-2007
Mensajes: 9
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
wiinigo está desconectado   Responder Citando
Antiguo 01-jun-2007, 15:21   #8 (permalink)
hector_he ha deshabilitado el karma
 
Avatar de hector_he
 
Fecha de Ingreso: agosto-2006
Ubicación: Barcelona (Spain)
Mensajes: 117
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.
hector_he está desconectado   Responder Citando
Antiguo 04-jun-2007, 03:52   #9 (permalink)
wiinigo ha deshabilitado el karma
 
Fecha de Ingreso: mayo-2007
Mensajes: 9
Re: AYUDA centrado vertical

Si pero alineado verticalmente no horizontalmente.

Con el text-align haces la alineación horizontal.
wiinigo está desconectado   Responder Citando
Antiguo 04-jun-2007, 06:43   #10 (permalink)
hector_he ha deshabilitado el karma
 
Avatar de hector_he
 
Fecha de Ingreso: agosto-2006
Ubicación: Barcelona (Spain)
Mensajes: 117
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/
hector_he está desconectado   Responder Citando
Antiguo 06-jun-2007, 06:16   #11 (permalink)
wiinigo ha deshabilitado el karma
 
Fecha de Ingreso: mayo-2007
Mensajes: 9
Re: AYUDA centrado vertical

Gracias por la idea.

Cuando haga las pruebas ya te comentaré si funciona.
wiinigo está desconectado   Responder Citando
Antiguo 07-jun-2007, 13:06   #12 (permalink)
marcelomdsc está en el buen camino
 
Avatar de marcelomdsc
 
Fecha de Ingreso: junio-2007
Ubicación: Windsor, Ca,United States
Mensajes: 637
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
marcelomdsc está desconectado   Responder Citando
Respuesta
No hay votos aún.


Herramientas
Desplegado

Normas de Publicación
No puedes crear nuevos temas
No puedes responder temas
No puedes subir archivos adjuntos
No puedes editar tus mensajes

BB code is Activado
Caritas están Activado
[IMG] está Activado
Código HTML está Desactivado


La Zona horaria es GMT -6. Ahora son las 10:25.


Message Board Statistics

LinkBacks Enabled by vBSEO 3.1.0

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93