图像垂直居中的偏移量不正确

Question

我有一个问题，就是无法正确地垂直对齐我的图片。我有一个高度和行高为40px的

容器。里面有另一个

，包含2个和1个。图像的高度设置为30px，因此缩小了图像。 的vertical-align属性设置为middle。但是生成的偏移量在顶部为8px，在底部为2px-在Firefox和Chrome中都是如此。如果我将vertical-align属性设置为top或baseline，则图像位于顶部边缘；将其设置为bottom会将它们移动到底部（完全没有间距）。

我试图找到一种方法来正确对齐它们而不需要额外的标记，但似乎找不到任何东西。我还尝试了解决方案如何在div内垂直对齐图像，但没有成功。

我创建了一个jsfiddle来说明这个问题：http://jsfiddle.net/pbQDS/ 希望你能帮忙！谢谢！

- patman

---

你尝试过这个解决方案吗？- http://www.jakpsatweb.cz/css/css-vertical-center-solution.html - klewis

谢谢，但我宁愿使用另一种解决方案，因为可能会有没有DOM节点的文本在div中。我认为使用line-height和vertical-align: middle应该可以解决问题。 - patman

我可能会错，但我认为你想要实现的是确保资产在其父元素内垂直对齐。如果是这样的话，那么定位或填充和边距设置是用来对齐容器内子项(尤其是图片)的好方法。 - klewis

即使您将文本放置在父元素中，最好也将该文本与某种元素一起包装，例如使用p标签。无论哪种情况，通常使用定位、填充和边距来管理对象的对齐和物理位置，相对于其父容器。您在这里有很大的灵活性。 - klewis

Answer 1

我会使用 "vs" span 将高度扩展到 100%，使图像与中线对齐。此外，我不会尝试将两个父容器都对齐到所需的高度，而只对其中一个进行对齐，以避免额外的 padding 或 margin 冲突。请查看此演示：http://jsfiddle.net/NcrGF/1/

- otinanai

---

抱歉可能让你有点困惑。在我的父元素#test内应该调整不止一个.section元素的大小。我尝试使用了你的一些想法，但没有成功。顺便说一下，如果我不明确设置.section的height属性，.section将以43px的高度呈现，这似乎也是vertical-align计算的基础，即使设置了另一个width和line-height。无论如何，我无法理解为什么它是43px，检查器无法提供该信息;-) - patman

我认为我的建议没有你提到的任何限制。请查看具有多个.section容器的演示。您只需要将.section的样式转移到#test即可。演示：http://jsfiddle.net/NcrGF/6/ - otinanai

Answer 2

CSS：

#test  {
    position:relative;
    width: 980px;
    margin: 20px auto 10px auto;
    padding:0;
    position: relative;
    background: #7B0000;
    border:solid 1px blue;
}

#test .section { 
    display:block;
    position:relative;
    padding:10px 0;
    margin:0;
}
#test .section:last-child { float: none; }
#test .section:first-of-type { padding-left: 180px; }
#test img { padding:0; margin:0; display:inline-block; height:30px; vertical-align: middle; position:relative; top:50%; }
#test .section span {position:relative; left:3px; top:50%; display: inline-block;} }

我的 JsFiddle演示

- klewis

Answer 3

好的，谢谢大家的帮助。我已经解决了问题。问题出在 line-height 属性上。给父容器 #test 或内部的 .section 任意一个设置 line-height 都会导致计算错误。如果我将 line-height 分配给 span，则一切似乎都可以正常呈现。

- patman