使用引导程序 3 垂直对齐中间内容

Question

我想用最新的引导 v3.2.0 在 div 块中设置垂直中间内容。

我已经阅读了vertical-align with bootstrap 3 的答案，但它在 div 块中使用了float:none;。

但是，根据我们的布局，我不能在 div 块中使用float:none;。

我有这个代码：

<div class="container">
  <div class="col-lg-4">....</div>
  <div class="col-lg-5">....</div>
  <div class="col-lg-3">....</div>
</div>

block 1的内容高度是动态的。我想根据block 1的高度设置block 2和3的垂直中间内容。

这是我们的布局目前的样子：

       Block 1           Block 2            Block 3
 ------------------ ------------------ ------------------
|  Content Height  |      Content     |      Content     |
|        is        |------------------ ------------------
|     Dynamic      | 
 ------------------ 

如果，我将使用float:none; 那么，这是我们的布局外观：

       Block 1           Block 2        
 ------------------ ------------------ 
|  Content Height  |                  |
|        is        |      Content     |
|     Dynamic      |                  |
 ------------------ ------------------ 
       Block 3
 ------------------
|      Content     |
 ------------------

这是我想要的样子：

       Block 1           Block 2            Block 3
 ------------------ ------------------ ------------------
|  Content Height  |                  |                  |
|        is        |      Content     |      Content     |
|     Dynamic      |                  |                  |
 ------------------ ------------------ ------------------

Answer 1

我发现最好的方法是在容器中创建表格布局：

看看这个小提琴：http://jsfiddle.net/StephanWagner/Zn79G/9/embedded/result

<div class="container">
  <div class="table-container">
    <div class="col-table-cell col-lg-4">A<br>A<br>A<br>A<br>A<br>A<br>A</div>
    <div class="col-table-cell col-lg-5">B</div>
    <div class="col-table-cell col-lg-3">C</div>
  </div>
</div>

@media (min-width: 1200px) {

     .table-container {
        display: table;
        table-layout: fixed;
        width: 100%;
    }

    .table-container .col-table-cell {
        display: table-cell;
        vertical-align: middle;
        float: none;
    }
}

媒体查询确保内容在大型显示器中只是一个表格，否则它将像以前一样堆叠。

Answer 2

这对我有用：

.container > div {
    float: none;
    display: table-cell;
    vertical-align: middle;
}

bootply example

Answer 3

.container {
  position: relative;
  height: 14rem;
  border: 1px solid;
}

.jumbotron {
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
  border: 1px dashed deeppink;
}

<div class="container theme-showcase" role="main">
  <div class="jumbotron">
    I want to center this div with Bootstrap.
  </div>
</div>

Get from [Solved] Vertically center with Bootstrap

Answer 4

我认为这是 bootstrap 3 的解决方案：http://jsfiddle.net/raffi/52VtD/7348/

.col-lg-4 {
    display: table-cell;
    vertical-align: middle;
    float: none;
}