logo标签列表

如何在Bootstrap中使用垂直对齐

csstwitter-bootstraptwitter-bootstrap-3
51

简单问题：如何使用Bootstrap垂直对齐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;
}
6
提供的解决方案在这里：**https://dev59.com/pGIj5IYBdhLWcg3wKyS0**非常有效！ - Max Stern
8个回答
70
.parent {
    display: table;
    table-layout: fixed;
}

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

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

2
table-layout:fixed！这就是我忘记添加的属性。如果没有它，表格自动布局将覆盖Bootstrap设置的元素宽度。感谢您的提醒。 - SPArcheon
10
我必须在 ".child" 上添加 "float: none"。否则，无论如何，“display” 都会被视为“block”（而不是“table-cell”）。奇怪的是，似乎每个人都对所提出的解决方案感到满意。我正在使用 Bootstrap 3.3.5，没有什么特别的东西。 - philippe_b
@philippe_b 也遇到了类似的问题。float: center 暗示了 display: block，我猜它比 display: table-cell 优先级更高。 - maryisdead
另外还需要在.child中添加float: none才能使其正常工作。顺便说一句，做得很好。这是我在多个高票答案后唯一有效的方法。 - George
42

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

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 列属性中使用了 float left，需要添加 "float: none;"。

干杯！

6
谢谢，使用这个例子我发现列堆叠停止工作了。 - jmontenegro
但是这个解决方案不具有响应性。 - Dynamic
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;
}
关于Bootstrap网格视图的问题。如何在不破坏Bootstrap网格操作的情况下包含表格、表格单元方法。 - magirtopcu
6

我不得不添加width: 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;
}
当你说“当我使用这个例子时”时，你指的是哪个例子？ - Kmeixner
哦，抱歉，我无法在引用的示例中添加评论...这是我的完整代码： .display-table { display: table; table-layout: fixed; width: 100%; }.display-cell { display: table-cell; vertical-align: middle; float: none; } - southz rgw
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类的标签上；它不能是 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-*标签上添加了table-layout和display属性。这些属性必须应用于已应用col-*的标签，而不能帮助其他标签。

1

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

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;
   }
}
-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>
这应该是水平对齐而不是垂直对齐。 - alias51
1
但是它已经垂直对齐了，不是吗？1a已经在1b上方。 - srakl
2
垂直居中对齐，使其位于父级div的中间，并在上下等距离分布。 - alias51
-3
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接