bootstrap3 如何实现两个 div 垂直对齐?

如何实现两个 div 之间的垂直对齐，比如说：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-xs-5">
    <div style="height:5em;border:1px solid #000">Big</div>
  </div>
  <div class="col-xs-5">
    <div style="height:3em;border:1px solid #F00">Small</div>
  </div>
</div>

Bootstrap 中的网格系统使用 float：left，而不是 display：inline-block，所以属性 vertical-align 不起作用。我尝试使用 margin-top 来对它进行修复，但我认为这不是响应式设计的一个比较好的解决方案。

twitter-bootstrap twitter-bootstrap-3

581 次阅读改进

1 个解决方案

Doraemon

华为云计算工程师

最简单的实现方案：

.vertical-align {
    display: flex;
    align-items: center;
}

改进