83

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.

LordHits
  • 5,054
  • 3
  • 38
  • 51

8 Answers8

144

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="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg" style="vertical-align: middle;" width="100px"/>
    <span style="vertical-align: middle;">Here is some text.</span>
</div>
Alex
  • 7,743
  • 1
  • 18
  • 38
ajm
  • 19,795
  • 3
  • 32
  • 37
  • This works. Thanks. One observation though on the style attribute you have on your span. If I remove that, it doesn't seem to change anything visually (in FF3.0.10 and IE7). That still needed? – LordHits Jun 09 '09 at 00:55
  • 4
    Yes. Vertical alignment in CSS works exactly opposite of how you think it would: individual Elements must be vertically aligned within a parent Element instead of telling a parent Element to vertically align all its children (like we'd do in a table cell). – ajm Jun 09 '09 at 13:40
  • 4
    unfortunately this doesn't work if the text wraps. only the 1st line is centered, the others overflow below the image (instead of all being centerd, wrapped, on the right of the image). http://jsfiddle.net/vPpD4/ – Spongman Jun 11 '14 at 23:20
25

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).

brettkelly
  • 27,655
  • 8
  • 56
  • 72
8

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"
backslash17
  • 5,300
  • 4
  • 31
  • 46
4

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.

3

I recommend using tables with <td valign="middle"> (as inkedmn mentioned, it works in all browsers), but if you're wrapping with a link, here's how to do it (works in ugly old browsers too, like Opera 9):

<a href="/" style="display: block; vertical-align: middle;">
    <img src="/logo.png" style="vertical-align: middle;"/>
    <span style="vertical-align: middle;">Sample text</span>
</a>
evilReiko
  • 19,501
  • 24
  • 86
  • 102
2

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.

John McCollum
  • 5,162
  • 4
  • 34
  • 50
1

Since most of the answers to this question are between 2009 and 2014 (except for a comment in 2018), there should be an update to this.

I found a solution to the wrap-text problem brought up by Spongman on Jun 11 '14 at 23:20. He has an example here: jsfiddle.net/vPpD4

If you add the following in the CSS under the div tag in the jsfiddle.net/vPpD4 example, you get the desired wrap-text effect that I think Spongman was asking about. I don't know how far back this is applicable, but this works in all of the current (as of Dec 2020/Jan 2021) browsers available for Windows computers. Note: I have not tested this on the Apple Safari browser. I have also not tested this on any mobile devices.

    div img { 
        float: left;
    }
    .clearfix::after {
        content: ""; 
        clear: both;
        display: table;
    }

I also added a border around the image, just so that the reader will understand where the edge of the image is and why the text wraps as it does. The resulting example looks is here: http://jsfiddle.net/tqg7hLzk/

MikeB
  • 19
  • 2
  • Sorry, but the CSS-part does not improve the solution. The original topvoted question seems still the fastest and best solution to me. – Melvin Jan 14 '21 at 18:25
  • `float: left` is not and will never be the solution to "vertically align image and text" – Eric Oct 09 '22 at 18:17
-3

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.

Brian
  • 8,147
  • 8
  • 34
  • 29
  • "valign" does not exist in css. You mixed up html `valign="center"` with `style="vertical-align:middle"` – etuardu Jan 04 '14 at 15:06