如何在bootstrap中使用垂直alignment
简单的问题：如何使用引导程序在col中垂直alignmentcol？ 这里的例子（我想垂直alignmentchild1a和child1b）：
http://bootply.com/73666
HTML
<div class="col-lg-12"> <div class="col-lg-6 col-md-6 col-12 child1"> <div class="col-12 child1a">Child content 1a</div> <div class="col-12 child1b">Child content 1b</div> </div> <div class="col-lg-6 col-md-6 col-12 child2"> Child content 2<br> Child content 2<br> Child content 2<br> Child content 2<br> Child content 2<br> </div> </div> UPDATE
一些CSS：
.col-lg-12{ top:40px; bottom:0px; border:4px solid green; } .child1a, .child1b{ border:4px solid black; display:inline-block !important; } .child1{ border:4px solid blue; height:300px; display:table-cell !important; vertical-align:middle; } .child2{ border:4px solid red; }
.parent { display: table; table-layout: fixed; } .child { display:table-cell; vertical-align:middle; text-align:center; }
table-layout: fixed可以防止破坏col- *类的function。
也许是一个老话题，但如果有人需要进一步的帮助，例如下面的例子（如果文本的高度大于文本，则将文本放在图像的中间位置）。
HTML：
<div class="row display-table"> <div class="col-xs-12 col-sm-4 display-cell"> img </div> <div class="col-xs-12 col-sm-8 display-cell"> text </div> </div>
CSS：
.display-table{ display: table; table-layout: fixed; } .display-cell{ display: table-cell; vertical-align: middle; float: none; }
我错过的重要的事情是“浮动：没有;” 因为它从引导列属性获得了浮动。
干杯!
对于父项： display: table;
对于孩子来说： display: table-cell;
然后添加vertical-align: middle;
我现在可以打个小提琴，但是现在回家了，耶！
好的，这里是可爱的小提琴： http : //jsfiddle.net/lharby/AJAhR/
.parent { display:table; } .child { display:table-cell; vertical-align:middle; text-align:center; }
我不得不增加宽度：100％; 显示表来修复IE和FF中的一些奇怪的行为，当我使用这个例子。 IE和FF在正确的宽度显示col-md- *标签时遇到了一些问题
.display-table { display: table; table-layout: fixed; width: 100%; } .display-cell { display: table-cell; vertical-align: middle; float: none; }
http://jsfiddle.net/b9chris/zN39r/
HTML：
<div class="item row"> <div class="col-xs-12 col-sm-6"><h4>This is some text.</h4></div> <div class="col-xs-12 col-sm-6"><h4>This is some more.</h4></div> </div>
CSS：
div.item div h4 { height: 60px; vertical-align: middle; display: table-cell; }
重要笔记：
-
vertical-align: middle; display: table-cell;vertical-align: middle; display: table-cell;必须应用于没有应用Bootstrap类的标签; 它不能是一个col-*，一row等 - 不幸的是，如果没有这个额外的，可能毫无意义的HTML标签，这是不可能的。
- 背景是不必要的 – 他们只是为了演示的目的。 因此，您不需要对
row或col-*标签应用任何特殊规则。 - 注意到内层标签不能伸展到其父层宽度的100％是很重要的。 在我们的情况下，这并不重要，但它可能会给你。 如果是这样，你最终会得到更接近于其他答案的东西：
http://jsfiddle.net/b9chris/zN39r/1/
CSS：
div.item div { background: #fdd; table-layout: fixed; display: table; } div.item div h4 { height: 60px; vertical-align: middle; display: table-cell; background: #eee; }
注意col-*标签上添加的表格布局和显示属性。 这必须应用于应用了col-*的标签; 它不会帮助其他标签。
普林森的答案是最好的select。 但是，要解决列不折叠的问题，他的代码需要被媒体检查语句包围。 这样，这些样式只适用于较大的列处于活动状态时。 这里是更新完整的答案。
HTML：
<div class="row display-table"> <div class="col-xs-12 col-sm-4 display-cell"> img </div> <div class="col-xs-12 col-sm-8 display-cell"> text </div> </div>
CSS：
@media (min-width: 768px){ .display-table{ display: table; table-layout: fixed; } .display-cell{ display: table-cell; vertical-align: middle; float: none; } }
你的意思是你想要1b和1b并排？
<div class="col-lg-6 col-md-6 col-12 child1"> <div class="col-6 child1a">Child content 1a</div> <div class="col-6 child1b">Child content 1b</div> </div>
使用Bootstrap 4，您可以更简单地执行此操作： http : //v4-alpha.getbootstrap.com/layout/flexbox-grid/#vertical-alignment
