我使用Twitter Bootstrap 3，当我想垂直对齐两个div时，我有问题，例如- JSFiddle链接:
<!-- 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来修复它，但我认为这不是响应式设计的一个很好的解决方案。
我也遇到了同样的问题。在我的情况下，我不知道外容器的高度，但这是我如何固定它:
首先设置html和body元素的高度，使它们为100%。这很重要!如果没有这一点，html和body元素将简单地继承它们的子元素的高度。
html, body {
height: 100%;
}
然后我有一个外部容器类:
.container {
display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
}
最后是带class的内部容器:
.inner-container {
display: table-cell;
vertical-align: middle;
}
HTML非常简单:
<body>
<div class="container">
<div class="inner-container">
<p>Vertically Aligned</p>
</div>
</div>
</body>
这就是垂直对齐内容所需要的全部内容。看看小提琴:
杰斯菲德尔
从Bootstrap 4开始，Flex行为就得到了原生支持。在行div中添加d-flex align-items-center。您不再需要修改CSS内容。
简单示例:http://jsfiddle.net/vgks6L74/
<!-- language: html -->
<div class="row d-flex align-items-center">
<div class="col-5 border border-dark" style="height:10em"> Big </div>
<div class="col-2 border border-danger" style="height:3em"> Small </div>
</div>
用你的例子:
http://jsfiddle.net/7zwtL702/
<!-- language: html -->
<div class="row d-flex align-items-center">
<div class="col-5">
<div class="border border-dark" style="height:10em">Big</div>
</div>
<div class="col-2">
<div class="border border-danger" style="height:3em">Small</div>
</div>
</div>
来源:Flex·Bootstrap
这个答案是一个黑客，但我强烈建议你使用flexbox(正如@Haschem回答中所述)，因为现在到处都支持它。
演示链接:
- Bootstrap 3
- Bootstrap 4 alpha 6
你仍然可以在需要的时候使用自定义类:
.vcenter {
显示:inline-block;
vertical-align:中间;
浮:没有;
｝
< div class = "行" >
<div class="col-xs-5 col-md-3 col-lg-1 vcenter">
<div style="height:10em;border:1px solid #000">Big</div>
< / div > < !--
——><div class="col-xs-5 col-md-7 col-lg-9 vcenter">
<div style="height:3em;border:1px solid #F00">小</div>
< / div >
< / div >
引导
使用内联块在块之间增加额外的空间，如果你在你的代码中允许一个真正的空间(如…< / div > < / div >……)。如果列的大小加起来是12，这个额外的空格就会破坏我们的网格:
<div class="row">
<div class="col-xs-6 col-md-4 col-lg-2 vcenter">
<div style="height:10em;border:1px solid #000">Big</div>
</div>
<div class="col-xs-6 col-md-8 col-lg-10 vcenter">
<div style="height:3em;border:1px solid #F00">Small</div>
</div>
</div>
这里，我们在<div class="[…]<div class="[…][col-lg-10">(一个回车符和2个制表符/8个空格)。所以…
让我们踢开这多余的空间!!
<div class="row">
<div class="col-xs-6 col-md-4 col-lg-2 vcenter">
<div style="height:10em;border:1px solid #000">Big</div>
</div><!--
--><div class="col-xs-6 col-md-8 col-lg-10 vcenter">
<div style="height:3em;border:1px solid #F00">Small</div>
</div>
</div>
注意看似无用的注释<!——……——> ?它们很重要——如果没有它们，<div>元素之间的空格将占据布局中的空间，破坏网格系统。
注意:Bootply已经更新
