CSS：为什么“垂直对齐：中间”不起作用？答案

【问题标题】：CSS: Why "vertical-align: middle" does not work?CSS：为什么“垂直对齐：中间”不起作用？
【发布时间】：2011-10-08 06:19:29
【问题描述】：

考虑以下示例：(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;
}

输出是：

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

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

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

【问题讨论】：

它在你的小提琴中为我工作（FF 5.0.1 Mac）
@prodigitalson：我使用的是 Firefox 5.0，但它看起来并不完全居中。你确定图片上方和下方的黑色区域高度完全相同（应该是(40px - 32px) / 2 = 4px）？
这很奇怪......我认为 jsfiddle 知道它的脚本 ID 为 cXUnT。顺便说一句，在 FF5 Win 中对我不起作用
任何方式都会有浏览器问题，否则你可以试试这个jsfiddle.net/cXUnT/3
@misha：我不确定到底有多少空间，但它看起来甚至在顶部和底部之间......可能大约 2px 给或取。

标签： html css vertical-alignment

【解决方案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/

【讨论】：

我同意这个。就我所见，这是最好的方法，而不用破解 IE 的废话。
@Misha Moroshko 是的，我感觉你可能会。有两个可行的选项：brunildo.org/test/img_center.html 或者您可能希望将图像作为 CSS background's 并使用 background-position: center center;
是的；这可能是问题，但你可以使用作为背景图像定义它的背景位置：左中心；垂直居中

【解决方案2】：

我无法真正告诉你为什么会发生这种情况的具体细节（我自己很好奇）。但这对我有用：

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 */
}

【讨论】：

这可能在旧版本的 IE 中中断。
但话又说回来，我不能告诉你什么可能不会（在某些时候）在 IE 中中断（尤其是 IE6 偏离路线；）
"..line-height(parent) or img height" 这就是重点，谢谢！

【解决方案3】：

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

【讨论】：

不应该在任何inline 或inline-block 上工作，只要行高合适——在这种情况下似乎是这样。
对不起，我忽略了这个例子......但是当我在 FF 和 IE 中查看它时，图片垂直居中:_)
你让我使用line-height 等于height。感谢您节省时间

【解决方案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>

【讨论】：

【解决方案5】：

如果您知道元素的垂直大小和行高，则可以使用vertical-align: top 加上上边距将其垂直居中。

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

【讨论】：

【解决方案6】：

只需将 img 标签放在 div 标签内即可显示：表格单元垂直对齐：div 中间。父标签应该是 display:table

例子：

CSS

a {
 display: table;
 background: #000;
 height:200px;
}
div {
 display:table-cell;
 vertical-align: middle;
}

HTML

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

【讨论】：

【解决方案7】：

不确定是什么原因。

删除 line-height 并添加 margins 到图像就可以了。

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

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

【讨论】：

【解决方案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}

【讨论】：

我不想把图片移到背景中。