如何在div中以flo​​at：right垂直居中居中？

Question

如何在div中以flo​​at：right垂直居中居中？

<div class="card">
  <div class="card-header">
    <h5>TEST</h5>
    <span class="fa fa-info"></span>
  </div>
  <div class="card-body">
    <div class="card-text">
      TEXT<br />
      TEXT<br />
      TEXT<br />
      TEXT<br />
    </div>
  </div>
</div>

.card {
  width: 200px;  
}

.card-header h5 {
  display: inline;
}

.card-header span {
  float: right;
}

在此示例中，跨度中的fa图标与顶部对齐。

如何垂直对齐该跨度？

jsfiddle：http://jsfiddle.net/zj3cubtd/

Answer 1

这是flexbox的一个很好的用例。添加以下CSS，它应该会按预期工作：

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-header h5 {
  margin: 0; /* It doesn't need 'display: inline'. Just get rid of its margin */
}

Answer 2

希望这会起作用。

.card {
  width: 200px;  
}

.card-header h5 {
  display: inline;
}

.card-header span {
  float: right;
}
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

<div class="card">
  <div class="card-header">
    <h5>TEST</h5>
    <span class="fa fa-info"></span>
  </div>
  <div class="card-body">
    <div class="card-text">
      TEXT<br />
      TEXT<br />
      TEXT<br />
      TEXT<br />
    </div>
  </div>
</div>