如何在div中垂直居中带有锚点的图像？

Question

我有一排DIVs用于导航，我只使用CSS将一个带有锚点的图片垂直居中。我试着垂直对齐:中间；但这不起作用。我确定这与浮动有关: left，因为所有图像都被推到左侧，但当我取出它时，div会变得疯狂。

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;
    }

Answer 1

我不知道为什么要使用li来保存锚元素。从这个问题中，没有提到李。所以我假设你只需要一张图片和一个锚。看看这个：

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

基本上，你只需要让helper的高度达到容器div的100%。你需要使用

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

在容器div中的所有子元素上，使它们垂直对齐。