html - 垂直对齐容器中的一行文本

Question

在 vertical-align here 上阅读了一些内容之后，我决定对此功能进行一些练习，但陷入了一个真正难以理解的问题。能否请您弄清楚为什么“文本行”在包装器 div 中没有垂直对齐。

.wrapper {
  height: 200px;
  background-color: aquamarine;
  margin: 0;
  padding: 0;
}

.ctxt {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  padding: 0;
}

.ctxt-before {
  display: inline-block;
  width: 10px;
  height: 200px;
  background-color: #f66;
  margin: 0;
  padding: 0;
}

<div class="wrapper">
  <!-- i think the line-box is 200px and div.ctxt should vertical-aligned in div.wrapper -->
  <div class="ctxt-before"></div>
  <p class="ctxt">this line of text</p>
</div>

我认为 line-box 是 200px 并且 div.ctxt 应该在 div.wrapper 中垂直对齐。

Answer 1

您几乎明白了，但是您将 ctxt div 的中间与 ctxt-before div 的基线对齐。因为它没有内容，所以它的基线是它的底部边缘。

您需要将它与 ctxt-before div 的中间对齐:

.wrapper {
  height: 200px;
  background-color: aquamarine;
  margin: 0;
  padding: 0;
}

.ctxt {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  padding: 0;
}

.ctxt-before {
  display: inline-block;
  width: 10px;
  height: 200px;
  background-color: #f66;
  margin: 0;
  padding: 0;
  vertical-align: middle; /* add this */
}

<div class="wrapper">
  <!-- i think the line-box is 200px and div.ctxt should vertical-aligned in div.wrapper -->
  <div class="ctxt-before"></div>
  <p class="ctxt">this line of text</p>
</div>