how to put text on the middle of an image

Hi Using CSS I'm trying to center some text on an image so it looks like this.

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

How can I achi开发者_如何学Ceve that result? Don't know if that helps, the image is 32x32 pixels.

img { vertical-align: middle; }

(although you'll probably want a more specific selector) and

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

Use the css property (on the image) vertical-align:middle;

If middle doesn't fit the bill, experiment to see what works with your font-face and font-size.

Here is the full list of values

Can the image be a background? If so, try

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

Just apply vertical-align:middle; to image

Here is the code example

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

I would make the div have your image as the background then type your text in, centre it and add some padding or margin to move it down and centre it perfectly.

e.g.

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

You might just need to adjust the padding, height and/or font-size to get the perfect verticle centre