Foros del Web » Creando para Internet » CSS »

Centrado de textos (vertical)

Estas en el tema de Centrado de textos (vertical) en el foro de CSS en Foros del Web. Hola a todos Ya estoy de nuevo dando la vara por aquí. El problema es el siguiente: Tengo un div con una imagen de fondo ...
  #1 (permalink)  
Antiguo 16/09/2005, 03:26
 
Fecha de Ingreso: junio-2004
Mensajes: 36
Antigüedad: 13 años, 5 meses
Puntos: 0
Centrado de textos (vertical)

Hola a todos
Ya estoy de nuevo dando la vara por aquí.
El problema es el siguiente:
Tengo un div con una imagen de fondo y esta sale tal como le he dicho ' left center', en el div escribo un texto , y este sale siempre posicionado arriba.
La pregunta:
¿como hacer para que el texto aparezca centrado verticalmente en la capa?

El codigo del div es:
div.euro{
float:right;
width: 85px;
height: 30px;
background-image:url(../iconos/euro.gif);
background-repeat:no-repeat;
BACKGROUND-POSITION: left center;
background-color: #cccccc;
color:#000000;
font-size:7pt;
padding: 0px 5px 0px 5px;
text-align: right;

}

Gracias a todos de antemano.

pepe
  #2 (permalink)  
Antiguo 16/09/2005, 22:22
Avatar de the_NEO_JP  
Fecha de Ingreso: abril-2005
Mensajes: 61
Antigüedad: 12 años, 7 meses
Puntos: 0
De por sí no puedes, pero puedes ir moviendole al padding top y padding bottom hasta que simule que está centrado.
__________________
by. NEO_JP // Aburrimiento Total
  #3 (permalink)  
Antiguo 19/09/2005, 12:26
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Hola smrc2k , the_NEO_JP :

No sé cuánto texto habrá dentro del div ...

Código:
<style>
div.euro{ 
float:right;
width: 85px;
height: 30px;
background-image:url("http://www.forosdelweb.com/images/smilies/wink.gif");
background-repeat:no-repeat; 
background-position: left center;
background-color: #cccccc;
color:#000000;
font-size:7pt;
padding: 0px 5px 0px 5px; 
text-align: right;
vertical-align:center;
}
div.euro img{
vertical-align:middle; 
height:100%; 
width:0;
}
</style>

<div class="euro"><img src="0.0" />wink</div>
Hay más detalles en

Centrar datos, tablas, textos,... en la vertical

saludos

furoya
  #4 (permalink)  
Antiguo 19/09/2005, 17:13
Avatar de hunab  
Fecha de Ingreso: febrero-2005
Ubicación: Barcelona
Mensajes: 133
Antigüedad: 12 años, 9 meses
Puntos: 1
si el texto es de una sola linea puedes poner un line-height igual al height del div, pero ten en cuenta que eso solo te funcionara con una sola linea!
Un saludo!
__________________
Marcio Barrios
marciobarrios.com // artículos sobre estándares y desarrollo web
  #5 (permalink)  
Antiguo 20/09/2005, 02:59
Avatar de KnowDemon  
Fecha de Ingreso: julio-2004
Ubicación: Ciudad de México
Mensajes: 544
Antigüedad: 13 años, 5 meses
Puntos: 2
Hola,

Me parece que esas soluciones son un poco rebuscadas. Hay 2 maneras muy sencillas de centrar verticalmente texto en una caja. Pero:

1. La altura de la caja no puede ser fija. Esta variará según el contenido de la caja.

...o bien...

2. Centrar en vertical en una caja con alto fijo implica fijar también el alto del contenido (del texto) que esta dentro de ella.

La forma 2 es muy obvia, así que la omitiremos, la 1 es simplemente asignar el mismo "padding" superior e inferior a la caja contenedora. Algo como:

div.caja{
padding-top: 5em;
padding-bottom: 5em;
}

Espero que te sirva.
__________________
Mi pequeño espacio en la web: VisiónE
"El cosmos es todo lo que es, todo lo que fue, y todo lo que será alguna vez."
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:14.