Search code examples
htmlcssstylesheetstyling

Vertical align on image and text?

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/

Solution

  • 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