Not a big problem, but catches my eyes and at some point looks unprofessional…

Scenario:

<p><img src="icon.png" /> Some text</p>

When looking at the rendered page, the image is down by 1px, relative to text. Although the img tag is pre-formatted in CSS to appear vertically centered to the text, it’s appearance is still wrong. I’ve checked this in many browsers and I found that this everywhere looks the same…

Look at this example:

Some text

Check closely the image position… To see better the image-text alignment, select the text or press Ctrl-A.

The solution…

Set the image position to relative and move up by 1px:

style = "vertical-align: middle; position: relative; top: -0.15em;"

Now it looks nice:

Some text

That’s it. For the simplicity and standard workflow, you may include in your css file:

img {
  border: none;
  vertical-align: middle;
}
img.text {
  vertical-align: middle;
  position: relative;
  top: -0.15em;
}

and use the style in html:

<p><img src="icon.png" class="text"/> Some text</p>