垂直居中对齐浮动内容答案

【问题标题】：Vertically middle align floated contents垂直居中对齐浮动内容
【发布时间】：2018-01-31 20:41:53
【问题描述】：

我正在关注 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 的高度垂直对齐。代码有什么问题？

【问题讨论】：

您不能使用float 和vertical-align...它只是不起作用...它也不会像您认为的那样做。
我已经编辑了你的 CSS 来增加 .child_1 的字体大小可以吗？
@Ivan 抱歉，打错了。我的意思是更长的文字

标签： html css flexbox css-float

【解决方案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>

【讨论】：

【解决方案2】：

在链接的问题中，您可以看到行框与main 对齐，但不是完全 - 尝试为@ 设置height 987654323@你会看到的。

您在此处为main 设置了height，这一切都不同了。为此，您可以使用 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>

【讨论】：