twitter-bootstrap Bootstrap 垂直对齐列中的一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40577430/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap vertical align a row in a col
提问by alexandrepa
I have a code : http://www.bootply.com/8uA4jyGZKB
我有一个代码：http: //www.bootply.com/8uA4jyGZKB
I would like to vertically center the text and icons at the right of the picture. How can I vertically center the contents of the col-md-10 div ?
我想将图片右侧的文本和图标垂直居中。如何将 col-md-10 div 的内容垂直居中？
回答by Saurav Rastogi
You can use CSS Flexbox.
您可以使用CSS 弹性盒。
Make the .rowa flex container and use align-itemsproperty to vertically center the content. Just like:
制作.row一个 flex 容器并使用align-items属性将内容垂直居中。就像：
.row {
display: flex;
align-items: center;
}
Have a look at the snippet below (use full screen for preview):
看看下面的片段（使用全屏预览）：
body {
padding-top: 50px;
}
.row {
display: flex;
align-items: center;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<img id="cover" src="http://cdn-images.deezer.com/images/cover/e19f5a2ec7877377a58b9d1ba22f55e1/120x120-000000-80-0-0.jpg" class="">
</div>
<div class="col-md-10">
<div class="col-md-4">
<div class="row">
<div class="col-md-12" contenteditable="false">Justin Bieber</div>
</div>
<div class="row">
<div class="col-md-12">Baby</div>
</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-2"><span class="glyphicon glyphicon-fast-backward"></span>
</div>
<div class="col-md-2"><span class="glyphicon glyphicon-play"></span>
</div>
<div class="col-md-2"><span class="glyphicon glyphicon-fast-forward"></span>
</div>
<div class="col-md-2"><span class="glyphicon glyphicon-volume-up"></span>
</div>
<div class="col-md-2"><span class="glyphicon glyphicon-random"></span>
</div>
<div class="col-md-2"><span class="glyphicon glyphicon-volume-off"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.container -->Hope this helps!
希望这可以帮助！
