How do I vertical center text next to an image in html/css?

Question

What is the best and easiest way to vertically center text that's next to an image in html? Needs to be browser version/type agnostic. A pure html/CSS solution.

Answer 1

One basic way that comes to mind would be to put the item into a table and have two cells, one with the text, the other with the image, and use style="valign:center" with the tags.

Answer 2

This might get you started.

I always fall back on this solution. Not too hack-ish and gets the job done.

EDIT: I should point out that you might achieve the effect you want with the following code (forgive the inline styles; they should be in a separate sheet). It seems that the default alignment on an image (baseline) will cause the text to align to the baseline; setting that to middle gets things to render nicely, at least in FireFox 3.

<div>
    <img src="http://stackoverflow.com/content/img/so/logo.png" style="vertical-align: middle;"/>
    <span style="vertical-align: middle;">Here is some text.</span>
</div>

Answer 3

That's a fun one. If you know ahead of time the height of the container of the text, you can use line-height equal to that height, and it should center the text vertically.

Answer 4

There are to ways: Use the attribute of the image tag align="absmiddle" or locate the image and the text in a container DIV or TD in a table and use

style="vertical-align:middle"

Answer 5

There are a couple of options:

• You can use line-height and make sure it is tall as the containing element
• Use display: table-cell and vertical align: middle

My preferred option would be the first one, if it's a short space, or the latter otherwise.

Answer 6

Does "pure HTML/CSS" exclude the use of tables? Because they will easily do what you want:

<table>
    <tr>
        <td valign="top"><img src="myImage.jpg" alt="" /></td>
        <td valign="middle">This is my text!</td>
    </tr>
</table>

Flame me all you like, but that works (and works in old, janky browsers).