Question

我正在开发一个jQuery移动网站，由于某种原因，line-height无法正常工作。所以我想，也许我犯了一个错误，所以我尝试了一个简单的空页，也在jsfiddle。这是JSFIDDLE链接。我记得，我做了一百万次，将一个元素垂直居中于另一个元素。

因此，当您看到结果时，您会看到红色框不在绿色框的中心。我发现，在顶部，有22px，在底部有16px。

任何人都可以解释一下，为什么会发生这种情况，我该如何解决？

<div style="height: 60px; width: 200px; line-height: 60px; border: 1px solid #0f0; box-sizing: border-box">
    <div style="display: inline-block; height: 20px; width: 40px;  border: 1px solid #f00; box-sizing: border-box"></div>
</div>

Answer 1

它与渲染的字体大小有关。您可以将容器的字体大小设置为20px，这将允许文本基线居中到内部块的高度。如果您查看 this fiddle ，您会看到具有字体大小且没有字体大小的块之间的区别。

这样做的主要原因是line-height是一个文本属性，并且使文本元素生效。但是，它可以弯曲到其他情况下工作。

我为此所做的只是向父级div添加font-size 20px：

<div style="height: 60px; width: 200px; line-height: 60px; display: inline-block; border: 1px solid #0f0; box-sizing: border-box; font-size: 20px;">
    <div style="display: inline-block; height: 20px; width: 40px; line-height: 40px; border: 1px solid #f00; box-sizing: border-box;"></div>
</div>

Answer 2

您可以尝试使用position: absolute将其移到您想要的位置http://jsfiddle.net/uwakdf1m/4/

    <div style="height: 60px; width: 200px; line-height: 60px; border: 1px solid #0f0; box-sizing: border-box; position: relative;">

    <div style="display: inline-block; height: 20px; width: 40px; border: 1px solid #f00; box-sizing: border-box; position: absolute; top: 50%; margin-top: -10px;/*half height of this element*/"></div>

</div>

您需要将position: relative放在容器div上，并且它不会与其他元素一起流动，但它确实以这种方式居中。

线高差距 - 不垂直居中内容

2 个答案: