Vertical align middle with Bootstrap responsive grid

Question

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

Requirements:

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

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

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

4. 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.

5. 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;
}

My code: http://jsfiddle.net/qhoc/F9ewn/1/

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.

Answer 1

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

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

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

Example

Answer 2

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

Note: .col-md-4 could be any grid column, its just an example here.