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

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. Here is some text.

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? – Lordts Jun 9 '09 at 0:55 2 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 9 '09 at 13:40.

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.

Because they will easily do what you want: This is my text! Flame me all you like, but that works (and works in old, janky browsers).

No worries. But i'm going to ignore table based solutions. ;) – Lordts Jun 8 '09 at 21:13 +1 for daring to propose a table-based solution :-) – Yann Trevin Sep 23 at 19:54.

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.

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.

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.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.

Related Questions