垂直对齐中间与引导响应网格 [英] Vertical align middle with Bootstrap responsive grid

问题描述

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

I have a very simple problem on vertical middle a span using Bootstrap 2.3.2.

要求：

1. 有两列，左列有固定高度

1. There are two columns, left column has a fixed height 300px because there is 300x300 image inside.

右栏有文字，必须以左栏为中心。

Right column has text and must be centered based on left column.

整个事情必须有反应。

The whole thing must be responsive. That's why I am using responsive image.

如果第二列向下到底，其高度必须适合文本的大小。这意味着我不能在第二列设置固定高度。

If the second column goes down to bottom, its height must fit the size of text. That means I cannot set fixed height on the second column.

不能使用JS来解决这个问题。

Must not use JS to solve this.

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 table-cell。我在此处复制了该方法如何在引导程序中使用垂直对齐（与此处的工作示例 http://jsfiddle.net/lharby/AJAhR/ ）

You can see what I did above: I basically set the second column span as table and middle the .content table-cell. I copied that method here How to use vertical align in bootstrap (with working example here http://jsfiddle.net/lharby/AJAhR/)

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

My challenge is a bit different due to requirements above. Any idea on how to make it work? Thanks.

推荐答案

将！important 规则添加到 display：$ .v-center 类的显示：table

Add !important rule to display: table of your .v-center class.

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

您的显示属性正在被引导覆盖到 ：block 。

Your display property is being overridden by bootstrap to display: block.

示例

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