come mettere il testo al centro di un'immagine

Question

Hi Utilizzando i CSS che sto cercando di centrare un testo su un'immagine in modo che appaia come questo.

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

Come posso ottenere tale risultato? Non so se questo aiuta, l'immagine è 32x32 pixel.

Answer 1

img { vertical-align: middle; } 

(anche se probabilmente si vorrà un selettore più specifico) e

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

Answer 2

Può l'immagine di essere uno sfondo? In tal caso, provare a

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

Answer 3

Utilizzare la proprietà css (sull'immagine) vertical-align:middle;

Se middle non si adatta il disegno di legge, esperimento per vedere che cosa funziona con il vostro font-face e font-size.

Ecco il full list of values

Answer 4

vorrei fare il div avere la vostra immagine come sfondo quindi digitare il testo nel, centro di esso e aggiungere un po 'padding o il margine per spostarlo verso il basso e centrarlo perfettamente.

ad es.

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

Si potrebbe semplicemente essere necessario regolare l'imbottitura, altezza e/o font-size per ottenere il centro verticle perfetta

Answer 5

Basta applicare vertical-align: middle; a immagine

Ecco il codice di esempio

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