Foros del Web » Creando para Internet » CSS »

Posicionar texto dentro de un DIV

Estas en el tema de Posicionar texto dentro de un DIV en el foro de CSS en Foros del Web. Hola! Tengo un pequeño problema / desafío (depende de como quieran verlo), el cual no he podido solucionar Tengo un DIV, con formato de cuadro ...
  #1 (permalink)  
Antiguo 04/02/2006, 16:46
 
Fecha de Ingreso: abril-2003
Ubicación: Santiago de Chile
Mensajes: 115
Antigüedad: 14 años, 7 meses
Puntos: 0
Pregunta Posicionar texto dentro de un DIV

Hola!

Tengo un pequeño problema / desafío (depende de como quieran verlo), el cual no he podido solucionar

Tengo un DIV, con formato de cuadro de texto, y quiero hacer que el texto que contiene el DIV quede completamente centrado, tanto horizontalmente como verticalmente...

Algo así:

+------------------+
| |
| Texto |
| Centrado |
| |
+------------------+

Este es mi código, hasta ahora

<div style=" text-align:center; border: 1px solid #999999; width: 114px; height: 58px; cursor: hand; "><a href="#" class="linkLugaresPago">Lugares de pago <br />de la empresa<br />XXXX</a></div>

.linkLugaresPago {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
color: #666666;
}

a.linkLugaresPago:link, a.linkLugaresPago:visited, a.linkLugaresPago:hover, a.linkLugaresPago:active {
text-decoration: underline;
}

Las dimensiones del DIV deben ser las que se indican, por necesidad de diseño... text-align: center me alinea el texto correctamente al centro del DIV, pero no he podido lograr que centre el texto verticalmente...

vertical-align: middle no hace el efecto que necesito, y si quiero darle un poco de padding-top, el div se ensancha, y no he podido dar con la causa :-\

Alguien puede ayudarme?
__________________
~[ The Hard ]~
- Sólo sé que nada sé...
- Hay un placer en la locura, que sólo los locos conocen...
- ¿Trabajas para vivir, o vives para trabajar?
  #2 (permalink)  
Antiguo 04/02/2006, 16:56
Tew
 
Fecha de Ingreso: enero-2006
Mensajes: 1.562
Antigüedad: 11 años, 11 meses
Puntos: 17
Cita:
Iniciado por TheHard
vertical-align: middle no hace el efecto que necesito, y si quiero darle un poco de padding-top, el div se ensancha, y no he podido dar con la causa :-\
Por lo ke se solo funciona en tablas... asi ke deberias usar un display: table-cell;
  #3 (permalink)  
Antiguo 04/02/2006, 17:20
 
Fecha de Ingreso: abril-2003
Ubicación: Santiago de Chile
Mensajes: 115
Antigüedad: 14 años, 7 meses
Puntos: 0
Hola!

Usé display: table-cell + vertical-align: middle , pero no dió resultado...

este es el código

<div style=" text-align:center; vertical-align: middle; display: table-cell; border: 1px solid #999999; width: 114px; height: 58px; cursor: hand; "><a href="#" class="linkLugaresPago">Lugares de pago <br />de la empresa<br />XXXX</a></div>

Alguna otra idea?

Gracias!
__________________
~[ The Hard ]~
- Sólo sé que nada sé...
- Hay un placer en la locura, que sólo los locos conocen...
- ¿Trabajas para vivir, o vives para trabajar?
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 20:04.