Vertically centering two <div class="span6">'s within Bootstrap

Question

EDIT: Just wanted to clarify that these spans have unknown height (because of responsiveness)!

I'm trying to vertically align two <div class="span6">'s within a <div class="row"> in Bootstrap and I'm having problems using any of my usual tricks, such as display: inline-block; or display: table-cell; (here's the JSFiddle I was working on: http://jsfiddle.net/mA6Za/).

Here's what I was trying to use, which does not work in Bootstrap:

<div class="container">
    <div class="row" style="display: table">
        <div class="span6" style="height: 300px; background: red; display: table-cell !important; vertical-align: middle;">
            Block 1 - Vertically center me please!
        </div>
        <div class="span6" style="height: 170px; background: blue; display: table-cell !important; vertical-align: middle;">
            Block 2- Center me too
        </div>
    </div>
</diV>

Is it possible to vertically align these two .span6's such that both the height of Block1 and Block2 are unknown? I'd like to use Bootstrap because of the responsible features, but for tablet+ we'd like the content to vertically align.

Answer 1

I don't think you're making very clear if you want the content of the div's to be vertically centered or the actual div's themselves. Anyway, there's a solution to both options:

Vertically centering the actual div's

First a solution which vertically aligns the div's: jsFiddle

It works by setting display: table; on .container and display: table-cell; on .row. Once that is done you can set vertical-align: middle; on .row to vertically center its content.

I have also had to manually force the width of .row to be 960px, this is not very responsive (you could fix that using media queries), but the margin-left of -20px which Bootstrap sets on .row doesn't work after setting display: table-cell; on .row. Not forcibly adding these extra 20px would result in the second div ending up below the first because they won't both fit together on the same line anymore. I have set some height: 100%;'s on all elements for demonstration purposes.

CSS

.container {
    margin-top: 10px;
    display: table;
    height: 100%;
}
.row {
    min-width: 960px;
    display: table-cell;
    height: 100%;
    vertical-align:middle;
}

Vertically centering the div's contents

If you wanted to vertically center the content of the div's, you can do that by setting display: table; on .row and setting display: table-cell; on .span6. You'd also need to get rid of float: left; on .span6 by setting it to float: none.

Here's a fiddle demonstrating this option: jsFiddle