How can I vertically center an image with an anchor inside a div?

问题

I have a row of DIVs for my navigation and I'm trying to vertically center an image with an anchor inside them using only CSS. I tried vertical-align: middle; but that isn't working. I'm sure it has to do with the float:left since all the images are pushed to the left side but when I take it out the divs go crazy.

HTML

<div class="linkgroup">
        <img src="images/homeIcon.png">
        <li class="navItem"><a href="somelink.com" class="navLink">HOME</a></li>
    </div>
</ul>

CSS

.linkgroup{
    float: left;
    height:5px;
    }

回答1:

Don't know why you are using li to hold the anchor element. From the question there is no mention for the li. So I assume you just need one image and one anchor. Check this out:

http://jsfiddle.net/U64Tg/2/

Basically you just need to have the helper to have 100% height of the container div. And you need to use

vertical-align: middle;
display: inline-block;

on all child elements in the container div to make them vertically aligned.

来源：https://stackoverflow.com/questions/16766004/how-can-i-vertically-center-an-image-with-an-anchor-inside-a-div