51

简单的问题：如何使用引导程序在 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;
}
4

8 回答 8

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

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

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

于 2013-10-03T08:40:09.580 回答
41

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

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

我错过的重要事情是“浮动：无”；因为它从 bootstrap col 属性中得到了浮动。

干杯!

于 2015-01-02T14:19:40.527 回答
8

对于家长：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;
}
于 2013-08-12T17:01:55.003 回答
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;
}
于 2015-04-30T17:54:36.997 回答
2

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 类的标签；它不能是 a col-*、 arow等。
  • 不幸的是，如果您的 HTML 中没有这个额外的、可能毫无意义的标签，就无法做到这一点。
  • 背景是不必要的——它们只是为了演示目的。因此，您不需要对roworcol-*标签应用任何特殊规则。
  • 重要的是要注意内部标签不会拉伸到其父标签宽度的 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-*；它对其他标签没有帮助。

于 2014-07-28T05:54:07.437 回答
1

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

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;
   }
}
于 2017-03-20T06:06:00.170 回答
-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>
于 2013-08-12T16:38:10.683 回答
-3

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

于 2016-10-18T20:58:09.220 回答