Question

我使用 Bootstrap 2.3.2 在垂直中间span上有一个非常简单的问题。

要求：

有两列，左栏有固定高度300px，因为里面有300x300图像。
右栏有文字，必须根据左栏居中。
整个事情必须要有回应。这就是我使用自适应图像的原因。
如果第二列向下移动到底部，则其高度必须符合文本的大小。这意味着我无法在第二列设置固定高度。
不得使用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/）

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

Answer 1

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

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

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

Example

Answer 2

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

注意：.col-md-4可以是任何网格列，这只是一个例子。

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

2 个答案: