Question

I have an anchor tag setup like below

<a href='' title='' class='video-author-box hoverbox'>
    <img style='height:32px;' src='IMAGE_URL' alt='' /> 
    Username
</a>

The trouble is that the text aligns to top of image, but I want the text to align in middle of the anchor and image.

Example: http://jsfiddle.net/qZFFX/2/

Answer 1

Here are two simple solutions for that:

1. Remove float: left of the image, so it will become inline, and add vertical-align: middle

Fiddle 1

1. If you know the height of your image (32px in your case), set the line-height of it’s container to it.

Fiddle 2