image - 如何在 div 中垂直居中带有 anchor 的图像？

Question

我有一行用于导航的 DIV，我试图仅使用 CSS 将图像垂直居中，其中有一个 anchor 。我试过 vertical-align: middle;但这是行不通的。我确定它与 float: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 来保存 anchor 元素。从问题中没有提到李。所以我假设你只需要一张图片和一个 anchor 。检查一下:

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

基本上，您只需要让助手拥有容器 div 的 100% 高度。你需要使用

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

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