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

在关联的问题中，您可以看到行框与main对齐，但完全 - 尝试设置{{1} } height，你会看到。

你main为height设置了这一点，这就完全不同了。为此，您可以使用 psuedo 元素 center ：

main

见下面的演示：

.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: '';
}

Answer 2

如果你添加

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 个答案: