我怎样才能垂直居中一个图像与锚内的一个div？ [英] How can I vertically center an image with an anchor inside a div?

问题描述

我有一排DIV用于导航，我正在尝试仅使用CSS将图像与锚内部对齐。我试过vertical-align：middle;但那是行不通的。我相信它与float：left有关，因为所有的图片都被推到了左边，但是当我把它拿出来的时候，div变得疯狂了。

HTML

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

CSS

  .linkgroup {
 float：left; 
 height：5px; 
 
  

解决方案

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

http：/ /jsfiddle.net/U64Tg/2/

基本上你只需要帮手有100％的容器div高度。你需要使用

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

对容器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;
    }

解决方案

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.

这篇关于我怎样才能垂直居中一个图像与锚内的一个div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！