title: Vertical align middle with Bootstrap responsive grid
body: <p>I have a very simple problem on vertical middle a <code>span</code> using <strong>Bootstrap 2.3.2</strong>.</p>
  
  <p><strong>Requirements:</strong></p>
  
  <ol>
  <li><p>There are two columns, left column has a fixed height 300px because there is 300x300 image inside.</p></li>
  <li><p>Right column has text and must be centered based on left column.</p></li>
  <li><p>The whole thing must be responsive. That's why I am using responsive image.</p></li>
  <li><p>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.</p></li>
  <li><p>Must not use JS to solve this.</p></li>
  </ol>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
    &lt;div class="row-fluid"&gt;
      &lt;div class="span6"&gt;
          &lt;img class="img-responsive" src="http://placehold.it/300x300"/&gt;
      &lt;/div&gt;
      &lt;div class="span6 v-center"&gt;
          &lt;div class="content"&gt;
              &lt;h1&gt;Title&lt;/h1&gt;
              &lt;p&gt;Paragraph&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong>:</p>
  
  <pre><code>.v-center {
      display:table;
      border:2px solid gray;
      height:300px;
  }
  
  .content {
      display:table-cell;
      vertical-align:middle;
      text-align:center;
  }
  </code></pre>
  
  <p><strong>My code:</strong> <a href="http://jsfiddle.net/qhoc/F9ewn/1/" rel="nofollow noreferrer">http://jsfiddle.net/qhoc/F9ewn/1/</a></p>
  
  <p>You can see what I did above: I basically set the second column <code>span</code> as table and <code>middle</code> the <code>.content</code> table-cell. I copied that method here <a href="https://stackoverflow.com/questions/18192114/how-to-use-vertical-align-in-bootstrap">How to use vertical align in bootstrap</a> (with working example here <a href="http://jsfiddle.net/lharby/AJAhR/" rel="nofollow noreferrer">http://jsfiddle.net/lharby/AJAhR/</a>)</p>
  
  <p>My challenge is a bit different due to requirements above. Any idea on how to make it work? Thanks.</p>