html - 如何使用“行高”将子内容置于中间？

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; }

现在我想把子内容放在中间。但是 parent 设置为绝对值，因此它不能与 line-height 一起使用。谢谢你的帮助。

请参阅此处的jsfiddle 。

Answer 1

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

要解决此问题，只需将您.child的显示设置为inline-block并给您.parent的 aline-height等于其高度（50px）：

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

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

JSFiddle 演示。

---

额外：如果你想集中.child分隔线，你只需给你.parent的 a text-alignof center（像这样）。

编辑：如果你想在你的.child分隔符中放置文本，你需要给它自己的line-height以匹配它的高度（15px）。