Question

简单问题：如何使用引导程序在col中垂直对齐col？这里的示例（我想垂直对齐child1a和child1b）：

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

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

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

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

Answer 2

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

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

我错过的重要事情是＆＃34; float：none;＆＃34;因为它从bootstrap col属性中浮动了。

干杯！

Answer 3

对于父母：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 4

我不得不加宽：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 5

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 6

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

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

Answer 7

你的意思是你希望 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 8

使用Bootstrap 4，您可以更轻松地完成这项工作：http://v4-alpha.getbootstrap.com/layout/flexbox-grid/#vertical-alignment

如何在bootstrap中使用垂直对齐

8 个答案: