How is the vertical text of the center next to the image in html / css?

Question

What is the best and easiest way to vertically center the text that is next to an image in html? Requires browser version / type agnostic. Pure html / CSS solution.

Answer 1

This can lead to a launch.

I always come back to this decision . Not too hack-ish and does its job.

EDIT: I must point out that you can achieve the desired effect with the following code (forgive inline styles, they should be on a separate sheet). It seems that the alignment by default on the image (baseline) will align the text to the baseline; setting that by the middle gets things to do 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 2

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> 

Cry to me whatever you like, but it works (and works in old, noisy browsers).

Answer 3

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

 style="vertical-align:middle" 

Answer 4

It's fun. If you know the height of the text container in advance, you can use a line height equal to that height, and it should center the text vertically.

Answer 5

There are several options:

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

My preferred option would be the first if it is a short space or the last otherwise.

Answer 6

I recommend using tables with <td valign="middle"> (as indicated by inkedmn , it works in all browsers), but if you wrap 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> 

Answer 7

One of the main ways that comes to mind is to place an element in a table and have two cells, one with text, the other with an image and use the style = "VALIGN: center" with tags.