How to put text in the middle of the image

Question

Hi Using CSS, I am trying to focus some text on the image so that it looks like this.

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

How can I achieve this result? I don’t know if this helps, the image is 32x32 pixels.

Answer 1

img { vertical-align: middle; }

(although you probably need a more specific selector) and

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

Answer 2

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

If the average does not match the score, experiment to see what works with your font and font size.

Here is the complete list of values

Answer 3

? ,

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

Answer 4

I would make a div so that your image is a background, then enter text, center it and add a registration or margin to move it down and center it perfectly.

eg.

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

You may need to adjust the indentation, height and / or font size to get the perfect center for the vertical.

Answer 5

Just apply vertical-align: middle; for image

Here is a sample code

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