垂直对齐中间与Bootstrap响应网格

我有一个非常简单的问题垂直中间一个span使用引导2.3.2。垂直对齐中间与Bootstrap响应网格

要求：

有两列，左边的列具有固定的高度300像素，因为有300×300图像内。
右栏有文字，必须以左栏为中心。
整件事情必须有回应。这就是为什么我使用响应式图像。
如果第二列落到底部，它的高度必须适合文本的大小。这意味着我无法在第二列上设置固定高度。
不得用JS来解决这个问题。

HTML：

<div class="container-fluid"> 
    <div class="row-fluid"> 
    <div class="span6"> 
     <img class="img-responsive" src="http://placehold.it/300x300"/> 
    </div> 
    <div class="span6 v-center"> 
     <div class="content"> 
      <h1>Title</h1> 
      <p>Paragraph</p> 
     </div> 
    </div> 
    </div> 
</div>

CSS：

.v-center { 
    display:table; 
    border:2px solid gray; 
    height:300px; 
} 

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

我的代码：http://jsfiddle.net/qhoc/F9ewn/1/

你可以看到我在上面做了什么：我基本上将第二列span设置为表格，middle将.content设置为表格单元格。我在这里复制了这种方法How to use vertical align in bootstrap（这里的工作示例为http://jsfiddle.net/lharby/AJAhR/）

由于上述要求，我的挑战有点不同。任何想法如何使其工作？谢谢。

来源

2013-12-09 HP.

'display：table-cell';导致这种错误的行为，请尝试使用'display：block' – MarmiK

将!important规则添加到.v-center类的display: table。

.v-center { 
    display:table !important; 
    border:2px solid gray; 
    height:300px; 
}

您的显示器属性正被引导程序覆盖到display: block。

Example

来源

2013-12-09 10:13:43 Morpheus

第二列的固定高度不符合上述＃4，因为它的高度应该缩小以适合文本大小的高度 –

没关系我想通了。只需在移动媒体查询中设置高度：自动 –

.row { 
    letter-spacing: -.31em; 
    word-spacing: -.43em; 
} 
.col-md-4 { 
    float: none; 
    display: inline-block; 
    vertical-align: middle; 
}

注：.COL-MD-4可以是任何网格列，它只是一个在这里的例子。

来源

2014-03-18 11:36:33 arithran

垂直对齐中间与Bootstrap响应网格

回答

相关问题