在div中垂直对齐文本的最佳做法是什么？

Question

我正在努力尝试垂直对齐我的某个文字字段。

我希望我的章节名称Integers and the Coordinate Plane放在我的红线中间。

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

有人可以就此发光吗？

Fiddle

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>

LESS

.chapter-detail {

    border: solid #c9cacb 1px;
    background-color: #F9F9F9;
    color: #293644;
    margin-bottom: 10px;
    margin-left: 3px;
    margin-right: 35px;
    margin-top: 30px;
    line-height: 38px;

    .ch-d-wrapper {
        text-align: center;
        border-right: solid #c9cacb 2px;
    }
    .ch-d-chapter{
        text-transform: uppercase;
        font-size: 12px;
    }
    .ch-d-num {
        font-weight: bold;
        font-size: 35px

    }
    .ch-d-name {
        font-size: 23px;
        vertical-align: middle;
    }
}

Answer 1

试试这个

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

Demo here

Answer 2

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

1）如果你知道父母的身高，只需使用line-height: "parent height"

2）如果您不知道父亲的身高，但您可以随意设置行高，那么您可以这样做：line-height: 20px; margin-top: calc(50% - 10px);

3）具有vertical-align的表格布局。

4）使用align-items：center

的Flex布局

Answer 3

正如您所料，

vertical-align不会以这种方式发挥作用。

在这种情况下，您可以使用边距或行高来对齐标题。如果你想要一个更可重用的版本，那么值得阅读关于绝对垂直定位的this article。

http://codepen.io/anon/pen/xGMrze?editors=110

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