为什么需要使用 line-height 属性垂直对齐 2 个以上的元素？答案

【问题标题】：Why needs more than 2 elements to be vertically aligned using line-height property?为什么需要使用 line-height 属性垂直对齐 2 个以上的元素？
【发布时间】：2016-09-13 02:57:16
【问题描述】：

我需要垂直对齐 inline-block 元素，并在 Internet 上看到一个使用 line-height 属性的示例。

代码如下：

HTML

div#line-parent {
  display: block;
  width: 100%;
  height: 100px;
  line-height: 100px;
  border: 1px dotted #ccc;
  background-color: antiquewhite;
  text-align: center;
}

div#line-parent:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
}

div.line-child {
  display: inline-block;
  width: 20%;
  line-height: normal;
  background-color: brown;
  vertical-align: middle;
}

<div id="line-parent">
  <div class="line-child">
    vertical align using line height
  </div>
</div>

但是，如果父级 (#line-parent) 仅包含子级 (.line-child)，则子级不会垂直居中对齐。

为了让子级在父级中垂直对齐，我在父级中添加了 speudo 类 :before（如我上面所做的那样）或在父级中添加了一些文本。

我想知道为什么我们需要添加多个元素才能使这些元素垂直对齐？它是如何工作的？

【问题讨论】：

没明白你的意思。好吧，如果您在仍然子 div 居中之前删除。
移除 :before 元素后它会居中。
我发现问题是我没有在HTML文件的开头添加。如果我将 DOCTYPE 添加为 ttp://www.w3.org/TR/html4/loose.dtd" rel="nofollow" target="_blank">w3.org/TR/html4/loose.dtd">，则代码不起作用。自 CSS 1.0 起不支持 line-height 属性
如果您省略 doctype 声明，浏览器会以 quirks 模式显示页面。怪癖之一是 inline-block 元素在块中的对齐方式不同，是的。（通常用表格单元格中的图像进行演示，在 quirks 模式下没有降级空间。）
而如果使用Transitional doctype，则页面以“几乎标准模式”显示，这也是一种quirks模式；尽管怪癖较少，但它仍然有这个。我不是在编造这个。

标签： html css

【解决方案1】：

有一个常见的误解，认为vertical-align 指的是内联级别元素的位置在父级中。

事实并非如此。

vertical-align 是指多个内联级别元素彼此在这样的容器内对齐。

来自W3 Spec

内联级框根据它们的“vertical-align”属性垂直对齐。如果它们对齐“顶部”或“底部”，它们必须对齐以最小化线框高度。

【讨论】：