垂直中间对齐浮动的内容

Question

我跟着这个SO Answer垂直对齐div的内容有float: left样式：

.main {
  height: 85px;
}

.child_1,
.child_2 {
  float: left;
  width: 8rem;
}

<div class="main">
  <div style="display: inline-block;vertical-align: middle;">
    <div class="child_1">
      Some long text is put here
    </div>
  </div>
  <div style="display: inline-block;vertical-align: middle;">
    <div class="child_2">
      22
    </div>
  </div>
</div>

但是，它不会根据包装div main的高度垂直对齐。代码有什么问题？

Answer 1

如果你添加

display: flex;
align-items: center;

到.main课，它应该工作。

.main {
  height: 85px;
  background-color: #f00;
  /*position: absolute;*/
  /*top: 2rem;*/
  display: flex;
  align-items: center;
}

.child_1,
.child_2 {
  float: left;
  width: 8rem;
}

<div class="main">
  <div style="display: inline-block;vertical-align: middle;">
    <div class="child_1">
      Some long text is put here
    </div>
  </div>
  <div style="display: inline-block;vertical-align: middle;">
    <div class="child_2">
      22
    </div>
  </div>
</div>

Answer 2

在链接的问题中，你可以看到线框对齐自己，但不完全与main对齐 - 尝试为height设置main，你会看到。

你在这里为height设置了main，这一切都有所不同。为此，您可以使用psuedo元素居中：

.main:after{
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  content: '';
}

见下面的演示：

.main {
  height: 85px;  
  border: 1px solid;
}

.child_1,
.child_2 {
  float: left;
}

.main:after{
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  content: '';
}

<div class="main">
  <div style="display: inline-block;vertical-align: middle;">
    <div class="child_1">
      Some long text is put here
    </div>
  </div>
  <div style="display: inline-block;vertical-align: middle;">
    <div class="child_2">
      22
    </div>
  </div>
</div>