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

Question

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

要求:

1. 有两列,左列有固定高度300px,因为里面有300x300图像.

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的表,middle该.content表单元格.我在这里复制了这个方法如何在bootstrap中使用vertical align(这里有工作示例http://jsfiddle.net/lharby/AJAhR/)

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

Answer 1

为您的班级添加!important规则.display: table.v-center

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

您的display属性被bootstrap覆盖display: block.

例