Centrado de textos (vertical)

[smrc2k]

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]

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

[furoya]

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]

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]

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.