Question

请考虑以下示例：（live demo here）

HTML：

<a><img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg" /></a>

CSS：

a {
    display: block;
    background: #000;
    line-height: 40px;  
}
img {
    vertical-align: middle;
}

输出结果为：

enter image description here

为什么图像不是垂直居中的？

我如何解决这个问题，以便它可以在所有主流浏览器中使用？

请不要假设任何图像尺寸（在本例中为32x32），因为在实际情况下图像尺寸未知。

Answer 1

您可以使用position:absolute;。

例如：

a {
    display: block;
    background: #000;
    line-height: 40px;
    height:80px;
    position:relative;  
}

img {
    position:absolute;
    top:50%;
    margin-top:-16px;
}

注意：这会使margin-top一半的图像尺寸。

选中此http://jsfiddle.net/cXUnT/7/

Answer 2

你应该display: table-cell我认为，这只适用于表格..我使用line-height等于元素的高度，它也适用。

Answer 3

我无法告诉你具体原因（我很好奇）。但这对我有用：

a {
    display: block;
    background: #000;
    line-height: 40px;  
}
img {
    vertical-align: middle;
    margin-top:-4px; /* this work for me with any given line-height or img height */
}

Answer 4

我遇到了同样的问题。这对我有用：

 <style type="text/css">
    div.parent {
         position: relative;
    }

    /*vertical middle and horizontal center align*/
    img.child {
        bottom: 0;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
    }
    </style>

    <div class="parent">
        <img class="child"> 
    </div>

Answer 5

如果你知道元素的垂直尺寸和线高，那么你可以使用vertical-align: top加上边距来垂直居中。

为了说明，我创建了：http://jsfiddle.net/feklee/cXUnT/30/

Answer 6

只需将img标签放在div标签中即可 display：table-cell vertical-align：div的中间位置。父标签应显示：table

示例：

的CSS

<a>
 <div>
  <img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-  131939.jpeg" />
 </div>
</a>

HTML

{{1}}

Answer 7

不确定原因是什么。

删除 line-height和添加 margins到图片就可以了。

＆＃13;

a {
  display: block;
  background: #f00;
}
img {
  margin: .3em auto;
  vertical-align: middle;
}

＆＃13;

<a>
 <img src="https://placeimg.com/30/30/any">
</a>

＆＃13;

Answer 8

尝试在<a>上使用背景图片：

<a href="#"></a>    
a {display:block;background:#000;line-height:40px;background:#000 url(http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg) no-repeat left center;text-indent:-999px}

CSS：为什么“vertical-align：middle”不起作用？

8 个答案: