垂直对齐中间内容与引导3 [英] vertical align middle content with bootstrap 3

问题描述

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

我已阅读 vertical-align with bootstrap 3 ，但它使用 float：none; 在div块中。

但是，不能在div块中使用 float：none;

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

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

这是我们的布局目前的外观：

 块1块2块3 
 ------------------ ------ ------------ ------------------ 
 |内容高度|内容|内容| 
 |是| ------------------ ------------------ 
 |动态| 
 ------------------ 
  

如果，我将使用 float：none; 因此，这是我们的布局看起来：

 第1块第2块
 ------------------ ------------ ------ 
 |内容高度| | 
 |是|内容| 
 |动态| | 
 ------------------ ------------------ 
块3 
 ------------------ 
 |内容| 
 ------------------ 
  

这是我想要的样子：

  1块2块3 
 ------------------ ------------------ ----- ------------- 
 |内容高度| | | 
 |是|内容|内容| 
 |动态| | | 
 ------------------ ------------------ ---------- -------- 
  

解决方案

最好的方法是在容器内创建表格布局：

查看这个小提琴： 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& div> 
< div class =col-table-cell col-lg-5> B< / div> 
< div class =col-table-cell col-lg-3> C< / div> 
< / div> 
< / div> 
  

  @media width：1200px）{
 
 .table-container {
 display：table; 
 table-layout：fixed; 
 width：100％; 
} 
 
 .table-container .col-table-cell {
 display：table-cell; 
 vertical-align：middle; 
 float：none; 
} 
} 
  

媒体查询确保内容只会是在大显示器中，否则它将堆叠，因为它以前。

I want to set vertical middle content in div block with latest bootstrap v3.2.0.

I have Read the answer to vertical-align with bootstrap 3, but it uses float:none; in div block.

However, I can't use float:none; in div block according to our layout.

I have this code:

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

Content Height is dynamic in block 1. I want to set vertical middle content in block 2 and 3 according to block 1 height.

This is how our layout currently looks:

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

if, I will use float:none; So, This is Our layout looks:

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

This is how I would like it to look:

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

解决方案

I found the best way to achieve that is to create a table layout within the container:

Check out this fiddle: 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;
    }
}

The media query makes sure the content will only be a table in large displays, otherwise it will stack as it used to.

这篇关于垂直对齐中间内容与引导3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！