cómo poner texto en el medio de una imagen

Question

Hola Uso de CSS Estoy tratando de centrar algo de texto en una imagen para que se vea así.

<div> 
------- 
|P | 
| I | This is some text. 
| C| 
------- 
</div> 

¿Cómo puedo lograr ese resultado? No sé si eso ayuda, la imagen es de 32x32 píxeles.

Answer 1

img { vertical-align: middle; } 

(aunque probablemente querrá un selector más específico) y

<div> 
<img alt="…" src="…" height="32" width="32"> This is some text. 
</div> 

Answer 2

¿Puede la imagen ser un fondo? Si es así, trate de

<div style="line-height: 32px; padding-left: 32px; background: url('PIC');">This is some text</div> 

Answer 3

Use la propiedad CSS (en la imagen) vertical-align:middle;

si media no concuerda con la factura, experimente para ver qué funciona con su fuente de fuente y tamaño de fuente.

Aquí está el full list of values

Answer 4

Me gustaría hacer el div tiene su imagen como el fondo a continuación, escriba el texto en, centro y añadir un poco de relleno o margen para moverlo hacia abajo y centrar perfectamente.

p. Ej.

div  { 
    width:32px; 
    height:21px; 
    padding-top:11px; 
    text-align:centre; 
    font-size:10px; 
    background:url(yourImageURL) no-repeat; 
} 

Es posible que sólo tenga que ajustar el relleno, la altura y/o tamaño de fuente para conseguir el centro verticle perfecta

Answer 5

Basta con aplicar vertical-align: media; a la imagen

Aquí está el ejemplo de código

http://www.templatespoint.com/blog/2010/12/text-align-vertically-middle-beside-the-image/