Question

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

我已阅读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>

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

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

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

if，我将使用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

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

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

Answer 4

.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>

垂直对齐中间内容与bootstrap 3

4 个答案: