如何在引导程序中使用垂直对齐

Question

简单问题：如何使用引导程序在 col 中垂直对齐 col？这里的例子（我想垂直对齐child1a和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>

更新

一些 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;
}

Answer 1

你的意思是你想让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>

Answer 2

对于家长：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;
}

Answer 3

.parent {
    display: table;
    table-layout: fixed;
}

.child {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

table-layout: fixed 防止破坏 col-* 类的功能。

Answer 4

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; 必须应用于未应用 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-* 的标签；它对其他标签没有帮助。

Answer 5

也许是一个老话题，但如果有人需要进一步的帮助，请执行以下操作（如果文本的高度大于文本，则将文本放在图像的中间行）。

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;
}

我错过的重要事情是“float: none;”因为它从引导 col 属性中得到了浮动。

干杯！

Answer 6

我必须添加宽度：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;
}

Answer 7

使用 Bootstrap 4，您可以更轻松地做到这一点：http://v4-alpha.getbootstrap.com/layout/flexbox-grid/#vertical-alignment

Answer 8

普林森的回答是最好的选择。但是，要解决列不折叠的问题，他的代码需要被媒体检查语句包围。这样，这些样式仅在较大的列处于活动状态时应用。这是更新后的完整答案。

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;
   }
}