如何用“线高”拍摄中间的儿童内容？

Question

请参阅我的HTMl，我需要一些帮助：

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

CSS：

.parent{position:absolute; height:50px; width:120px; background:green}
.child{background:red; width:15px; height:15px; }

现在我想把孩子的内容放在中间。但是父级是用绝对值设置的，所以它不能用于行高。谢谢你的帮助。

请参阅jsfiddle here。

Answer 1

这是因为默认情况下您的.child分隔符设置为显示为块级元素，因此不受line-height的影响。

要解决此问题，只需将.child设置为inline-block，然后将.parent line-height等于其高度（50px）：

.parent {
    ...
    line-height: 50px;
}

.child {
    ...
    display: inline-block;
}

JSFiddle demo

---

额外：如果您想要集中.child分隔符，则只需向.parent text-align center .child（like this }）。

编辑： 如果您想在line-height分隔符中放置文字，则需要自行提供{{1}}匹配它的高度（15px）。