html - 当你有另一个带 float 的 div 时如何使文本居中

Question

我对如何在内部有两个 div 的 div 中垂直居中文本感到有点困惑(第一个:文本，第二个:带 float 的按钮)

是否可以在没有多行的情况下做到这一点？ https://jsfiddle.net/jr9yx3kx/

HTML

<div class="alert alert-success">
  <span>Information box lorem ipsum</span>
  <a href="" class="btn btn-solid">Why is it not correct?</a>
  <div class="clearfix"></div>
</div>

CSS

.alert {
    padding: 17px;
    margin-bottom: 2rem;
    border: 1px solid transparent;
    font-size: 12px;
    border-radius: 0.215rem;
    background: #ccc;
    color: #fff;
}
.alert a.btn {
  float: right;
}
.btn {
  padding: 0.429rem 0.929rem;
    font-size: 0.858rem;
    border-radius: 0.143rem;
    font-weight: 400;
    line-height: 1.57142857;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background: blue;
    color: #fff;
}
.clearfix {
  clear: both;
}

Answer 1

您可以使用通常的垂直居中方法，给容器 position: relative 和 span 这些设置:

.alert span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
} 

这是一个片段:

.alert {
  padding: 17px;
  margin-bottom: 2rem;
  border: 1px solid transparent;
  font-size: 12px;
  border-radius: 0.215rem;
  background: #ccc;
  color: #fff;
  position: relative;
}

.alert span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.alert a.btn {
  float: right;
}

.btn {
  padding: 0.429rem 0.929rem;
  font-size: 0.858rem;
  border-radius: 0.143rem;
  font-weight: 400;
  line-height: 1.57142857;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background: blue;
  color: #fff;
}

.clearfix {
  clear: both;
}

<div class="alert alert-success">
  <span>Information box lorem ipsum</span>
  <a href="" class="btn btn-solid">Why is it not correct?</a>
  <div class="clearfix"></div>
</div>