title: Vertically centering two <div class="span6">'s within Bootstrap
body: <p><strong>EDIT</strong>: Just wanted to clarify that these spans have unknown height (because of responsiveness)!</p>
  
  <p>I'm trying to vertically align two <code>&lt;div class="span6"&gt;</code>'s within a <code>&lt;div class="row"&gt;</code> in Bootstrap and I'm having problems using any of my usual tricks, such as <code>display: inline-block;</code> or <code>display: table-cell;</code> (here's the JSFiddle I was working on: <a href="http://jsfiddle.net/mA6Za/" rel="noreferrer">http://jsfiddle.net/mA6Za/</a>).</p>
  
  <p>Here's what I was trying to use, which does not work in Bootstrap:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row" style="display: table"&gt;
          &lt;div class="span6" style="height: 300px; background: red; display: table-cell !important; vertical-align: middle;"&gt;
              Block 1 - Vertically center me please!
          &lt;/div&gt;
          &lt;div class="span6" style="height: 170px; background: blue; display: table-cell !important; vertical-align: middle;"&gt;
              Block 2- Center me too
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/diV&gt;
  </code></pre>
  
  <p>Is it possible to vertically align these two <code>.span6</code>'s such that both the height of <code>Block1</code> and <code>Block2</code> are unknown? I'd like to use Bootstrap because of the responsible features, but for tablet+ we'd like the content to vertically align.</p>