我使用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的Less版本，并且自己编译成CSS，你可以使用一些实用工具类来使用Bootstrap类。
我发现当我想保持Bootstrap网格系统的响应性和可配置性(比如使用-md或-sm)时，这些方法工作得非常好，但我希望给定行的所有列都具有相同的垂直高度(这样我就可以垂直对齐它们的内容，并让行中的所有列共享一个公共的中间位置)。
CSS /少:
.display-table {
display: table;
width: 100%;
}
.col-md-table-cell {
@media (min-width: @screen-md-min) {
display: table-cell;
vertical-align: top;
float: none;
}
}
.col-sm-table-cell {
@media (min-width: @screen-sm-min) {
display: table-cell;
vertical-align: top;
float: none;
}
}
.vertical-align-middle {
vertical-align: middle;
}
HTML:
<div class="row display-table">
<div class="col-sm-5 col-sm-table-cell vertical-align-middle">
...
</div>
<div class="col-sm-5 col-sm-table-cell vertical-align-middle">
...
</div>
</div>
我也遇到了同样的问题。在我的情况下，我不知道外容器的高度，但这是我如何固定它:
首先设置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>
这就是垂直对齐内容所需要的全部内容。看看小提琴:
杰斯菲德尔
