我使用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来修复它，但我认为这不是响应式设计的一个很好的解决方案。
我详细阐述了zessx的答案，以便在不同屏幕尺寸上混合不同的列大小时更容易使用。
如果你使用Sass，你可以把这个添加到你的scss文件中:
@mixin v-col($prefix, $min-width) {
@media (min-width: $min-width) {
.col-#{$prefix}-v {
display: inline-block;
vertical-align: middle;
float: none;
}
}
}
@include v-col(lg, $screen-lg);
@include v-col(md, $screen-md);
@include v-col(sm, $screen-sm);
@include v-col(xs, $screen-xs);
它生成以下CSS(如果你不使用Sass，你可以直接在你的样式表中使用):
@media (min-width: 1200px) {
.col-lg-v {
display: inline-block;
vertical-align: middle;
float: none;
}
}
@media (min-width: 992px) {
.col-md-v {
display: inline-block;
vertical-align: middle;
float: none;
}
}
@media (min-width: 768px) {
.col-sm-v {
display: inline-block;
vertical-align: middle;
float: none;
}
}
@media (min-width: 480px) {
.col-xs-v {
display: inline-block;
vertical-align: middle;
float: none;
}
}
现在你可以像这样在你的响应列上使用它:
<div class="container">
<div class="row">
<div class="col-sm-7 col-sm-v col-xs-12">
<p>
This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
</p>
</div><div class="col-sm-5 col-sm-v col-xs-12">
<p>
This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
</p>
</div>
</div>
<div class="row">
<div class="col-md-7 col-md-v col-sm-12">
<p>
This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
</p>
</div><div class="col-md-5 col-md-v col-sm-12">
<p>
This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
</p>
</div>
</div>
</div>
从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
这就是我的解。只需将这个类添加到您的CSS内容。
.align-middle {
display: flex;
justify-content: center;
align-items: center;
}
然后你的HTML看起来是这样的:
<div class="col-xs-12 align-middle">
<div class="col-xs-6" style="background-color:blue;">
<h3>Item</h3>
<h3>Item</h3>
</div>
<div class="col-xs-6" style="background-color:red;">
<h3>Item</h3>
</div>
</div>
.align-middle {
display: flex;
justify-content: center;
align-items: center;
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<title>Title</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 align-middle">
<div class="col-xs-6" style="background-color:blue;">
<h3>Item</h3>
<h3>Item</h3>
</div>
<div class="col-xs-6" style="background-color:red;">
<h3>Item</h3>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
