CSS 垂直对齐稍微偏离答案

【问题标题】：CSS vertical-align slightly offCSS 垂直对齐稍微偏离
【发布时间】：2012-07-21 21:57:32
【问题描述】：

好的，这让我发疯了：http://jsfiddle.net/C3YMJ/2/
图像应该在div 中垂直居中，但如您所见，它稍微偏离了中心。我无法让它准确地居中。任何帮助将不胜感激。
谢谢。

【问题讨论】：

【解决方案1】：

您可以使用 CSS position 属性将图像垂直居中：

div { 
    position:relative;
}

img {
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
}

【讨论】：

【解决方案2】：

您可以删除vertical-align 属性，它没有任何效果，因为图像没有可以应用的子元素。

在div 上使用line-height: 20px;。

【讨论】：

【解决方案3】：

将 line-height: 100% 添加到您的 DIV 将解决问题。

【讨论】：

【解决方案4】：

我会去掉 div 的高度，并在顶部和底部使用填充。

html: <div><img src="https://www.google.com/images/srpr/logo3w.png" height="10" /></div>
css:  div {background-color: blue; padding: 5px 0;}

这将使它在中间对齐。

【讨论】：

【解决方案5】：

您的代码不起作用。如果同时增加两个高度，则完全不居中：http://jsfiddle.net/WouterJ/C3YMJ/3/

有关如何解决此问题的更多信息，请参阅 Chris Coyier 的 Centering in the unkown 文章。

编辑：删除错误的语句。

【讨论】：