使用Bootstrap响应式网格实现垂直居中对齐

Question

我在使用Bootstrap 2.3.2时遇到了一个非常简单的问题，需要垂直居中一个含有span标签的元素。

要求：

1. 有两列，左侧列内有一张300x300像素的图片，高度固定为300像素。

2. 右侧列内为文本，必须基于左侧列进行居中对齐。

3. 整个布局必须是响应式的，因此我正在使用响应式图片。

4. 如果第二列下移至底部，则其高度必须适应文本大小。这意味着我不能在第二列上设置固定高度。

5. 不能使用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 设置为表格，并且垂直居中了 .content 表格单元格。我在这里复制了这种方法（如何在bootstrap中使用垂直对齐）（带有工作示例在这里http://jsfiddle.net/lharby/AJAhR/）。

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

- HP.

---

使用 display:table-cell 会导致错误的行为，尝试使用 display:block。 - MarmiK

Answer 1

在你的 .v-center 类中为 display: table 添加 !important 规则。

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

您的显示属性被Bootstrap覆盖为display: block。

示例

- Morpheus

---

第二列的固定高度不符合上面的#4，因为它的高度应该缩小以适应文本大小的高度。 - HP.

没关系，我已经想通了。只需在移动媒体查询中设置height:auto即可。 - HP.

Answer 2

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

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

- Arithran