twitter-bootstrap 在 Bootstrap 中垂直居中对齐一列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35355866/
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
Vertical Center align a column in Bootstrap
提问by AVEbrahimi
I tried a dozen ways to center align column vertically in bootstrap but none worked.
My problem is I don't know then height of column.
Can I use flexbox? Is it embedded in Bootstrap 3?
我尝试了十几种方法在引导程序中垂直居中对齐列，但都没有奏效。我的问题是我不知道列的高度。我可以使用 flexbox 吗？它是否嵌入在 Bootstrap 3 中？
my code :
我的代码：
<div class="row">
<div class="col-sm-12">
<div class="col-md-2" style="padding: 0px">
<img alt="img" src="image/avatar/unknown.png" class="img-responsive forum-avatar">
</div>
<div class="col-md-6">
<span class="qap-q-author">user1</span>
<br>
<span class="qap-q-h">test</span>
</div>
<div class="col-md-2">
<span class="text-muted pull-right qap-a-cnt">
<span> </span>
<span class="badge">1</span>
</span>
<span class="qap-q-h pull-right">1</span>
</div>
<div class="col-md-2">
<i class="fa fa-group" style="font-size: 32px"></i>
</div>
</div>
</div>
回答by ashfaq.p
Flexbox can be used but then you will have to take care of old browsers. Center aligning a column in bootstrap is explained here perfectly. Have a look center align column in bootstrap
可以使用 Flexbox，但您将不得不照顾旧浏览器。在引导程序中居中对齐列在这里得到了完美的解释。看看bootstrap 中的居中对齐列
You can center align the columns by using flexbox.
您可以使用 flexbox 将列居中对齐。
you can add this class to parent container of your div which you want to center align:
您可以将此类添加到要居中对齐的 div 的父容器中：
.v-center {
display: flex;
align-items: center;
}
Read more about vertically aligning columns here: vertical align columns
在此处阅读有关垂直对齐列的更多信息：垂直对齐列
