如何在 div 内使用锚点垂直居中图像？

【问题标题】：How can I vertically center an image with an anchor inside a div?如何在 div 内使用锚点垂直居中图像？
【发布时间】：2013-05-21 21:17:08
【问题描述】：

我有一排用于导航的 DIV，我正在尝试仅使用 CSS 将带有锚点的图像垂直居中。我试过垂直对齐：中间；但这行不通。我确定它与 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;
    }

【问题讨论】：

标签： image html anchor vertical-alignment

【解决方案1】：

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

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

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

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

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

【讨论】：

我也是，哈哈。这就是我在使用导航制作列表时被教导的方式。我对此仍然很陌生，所以我只是按照我所知道的。但感谢那个链接！超级有帮助。