Html 在div中垂直对齐文本的最佳实践是什么？

我正在努力做垂直对齐到我的一个文本字段

我想把我的章名<代码>整数和坐标平面< /代码>放在我的红线中间。

我试过使用垂直对齐，但可能用错了

有人能帮我解释一下吗

HTML

<div class="row chapter-detail">
  <div class="col-xs-4 col-sm-2 col-md-2 col-lg-1 no-padding ">
  <div class="ch-d-wrapper">
    <div class="ch-d-chapter ">CHAPTER</div>
    <div class="ch-d-num">6</div>
  </div>
  </div>
  <div class="col-xs-8 col-sm-10 col-md-10 col-lg-11 no-padding ">
    <div class="ch-d-name">Integers and the Coordinate Plane</div>
  </div>
</div>

试试这个

 .ch-d-name {
        line-height:70px;  //added this.
        font-size: 23px;
        vertical-align: middle;
    }

---

你可以使用不同的技术，我认为它们同样有效

1） 如果您知道父级的高度，只需使用

行高：“父级高度”

2） 如果您不知道父级的高度，但可以随意设置行高度，那么您可以这样做：

行高度：20px；利润上限：计算（50%-10px）

3） 垂直对齐的表格布局

4） 带有对齐项的Flex布局：居中对齐
垂直对齐
并不像您预期的那样以这种方式工作

在这种情况下，可以使用边距或线条高度来对齐页眉。如果你想要一个更可重用的版本，绝对垂直定位值得一读


使用
.col-xs-8.col-sm-10.col-md-10.col-lg-11.no-padding{margin top:20px；}
@somethinghere-为什么要将
文本对齐：居中
垂直居中？@somethinghere:我知道
文本对齐：居中
我想垂直对齐。你在发表评论之前读过我的帖子吗？他甚至对那篇评论投了1票赞成票。我很惊讶。文字和线条不一样。请保持这个问题的开放性。它将帮助那些有同样问题的人，他们正在搜索“行”而不是“文本”。
 .ch-d-name {
        line-height:70px;  //added this.
        font-size: 23px;
        vertical-align: middle;
    }

.ch-d-name {
    font-size: 23px;
    margin-top: 20px;
}