twitter-bootstrap 如何垂直居中另一列内的 Bootstrap 列？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36215876/
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
How to vertically center Bootstrap columns that are inside another column?
提问by alex
I want to vertically center the divs inside col-md-12. This is the structure:
我想将里面的 div 垂直居中col-md-12。这是结构：
.list-item {
border-bottom: 1px solid #e7e7e7;
float: left;
padding: 15px 0;
width: 100%;
}
.list-item img {
width: 60px;
height: 60px;
}
.col-md-2 {
float: left;
width: 16.66666667%;
}<div class="list-item col-md-12 clearfix">
<div class="col-md-1">
<img class="img-circle" src="https://aframe.io/aframe/examples/_skies/puydesancy.jpg">
</div>
<div class="col-md-2">
<strong>
<a href="#/buildings/1">Central park</a>
</strong>
</div>
<div class="col-md-5">
<span>The description for central park description for the central park</span>
</div>
<div class="col-md-2">
<span>Category count:</span>
<strong>3</strong>
</div>
<div class="col-md-2">
<span>Panorama count:</span>
<strong>7</strong>
</div>
</div>I tried: vertical-align: middleand display: inlinebut it didn't work. Is there another way?
我想：vertical-align: middle和display: inline，但没有奏效。还有其他方法吗？
Here's the JSFiddle: https://jsfiddle.net/wLgfLo3L/
这是 JSFiddle：https://jsfiddle.net/wLgfLo3L/
(You need to resize the browser to full screen).
（您需要将浏览器调整为全屏）。
回答by Gaurav Aggarwal
Very simple solution for this is with this css.
非常简单的解决方案是使用这个 css。
HMTL
HMTL
<div class="list-item col-md-12 clearfix main">
<div class="col-md-1 center">
<img class="img-circle" src="https://aframe.io/aframe/examples/_skies/puydesancy.jpg">
</div>
<div class="col-md-2 center">
<strong>
<a href="#/buildings/1">Central park</a>
</strong>
</div>
<div class="col-md-5 center">
<span>The description for central park description for the central park</span>
</div>
<div class="col-md-2 center">
<span>Category count:</span>
<strong>3</strong>
</div>
<div class="col-md-2 center">
<span>Panorama count:</span>
<strong>7</strong>
</div>
</div>
CSS
CSS
.main{
display:table;
}
.center{
display:table-cell;
vertical-align:middle;
}
In the above codes i have added .mainclass to main div and .centerclass to div you want to align center.
在上面的代码中，我将.main类添加到主 div 并将.center类添加到要居中对齐的 div。
With display:tableto main and display:table-cellto inner div you can center align the div with vertical-align:middlebecause this converts the nature of div to table.
对于display:table主要和display:table-cell内部 div，您可以将 div 居中对齐，vertical-align:middle因为这会将 div 的性质转换为表格。
Here is the updated fiddle link check it https://jsfiddle.net/yudi/wLgfLo3L/1/
这是更新的小提琴链接检查它https://jsfiddle.net/yudi/wLgfLo3L/1/
