Foros del web, para los que viven de bits

smrc2k · 16-sep-2005, 02:26

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

the_NEO_JP · 16-sep-2005, 21:22

De por sí no puedes, pero puedes ir moviendole al padding top y padding bottom hasta que simule que está centrado.

furoya · 19-sep-2005, 11:26

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

hunab · 19-sep-2005, 16:13

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!

KnowDemon · 20-sep-2005, 01:59

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.

16-sep-2005, 02:26	#1 (permalink)
smrc2k Fecha de Ingreso: junio-2004 Mensajes: 36	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

16-sep-2005, 21:22	#2 (permalink)
the_NEO_JP Fecha de Ingreso: abril-2005 Mensajes: 61	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

19-sep-2005, 16:13	#4 (permalink)
hunab Fecha de Ingreso: febrero-2005 Ubicación: Barcelona Mensajes: 133	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

20-sep-2005, 01:59	#5 (permalink)
KnowDemon Fecha de Ingreso: julio-2004 Ubicación: Ciudad de México Mensajes: 541	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."

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado