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

时间:2013-05-27 03:41:36

标签: image html anchor vertical-alignment

我的导航中有一排DIV,我正在尝试使用CSS将一个锚点垂直居中。我试过vertical-align:middle;但那不起作用。我确定它与浮动有关:左边因为所有的图像都被推到左侧但是当我把它拿出来时,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;
    }

1 个答案:

答案 0 :(得分:3)

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

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

基本上你只需要帮助器就可以拥有容器div的100%高度。你需要使用

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

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