垂直居中对齐浮动内容

Question

我按照这个 SO Answer 来垂直对齐具有 float: left 样式的 div 的内容：

.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;

到.mainclass，应该可以。

.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 - 尝试为 main 设置一个 height，你会看到。

您在此处 height 设置了 main，这一切都不同了。为此，您可以使用 psuedo 元素到 center:

.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>

垂直居中对齐浮动内容

Vertically middle align floated contents

html

css

css-float

flexbox