title: vertical-align: middle with Bootstrap 2
body: <p>I use the twitter bootstrap and I wanted to align verticaly a <code>div</code> block with a picture and the text at the right.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;ol class="row" id="possibilities"&gt;
       &lt;li class="span6"&gt;
           &lt;div class="row"&gt;
               &lt;div class="span3"&gt;
                   &lt;p&gt;some text here&lt;/p&gt;
                   &lt;p&gt;Text Here too&lt;/p&gt;
               &lt;/div&gt;
               &lt;figure class="span3"&gt;&lt;img src="img/screenshots/options.png" alt="Some text" /&gt;&lt;/figure&gt;
           &lt;/div&gt;
       &lt;/li&gt;
       &lt;li class="span6"&gt;
           &lt;div class="row"&gt;
               &lt;figure class="span3"&gt;&lt;img src="img/qrcode.png" alt="Some text" /&gt;&lt;/figure&gt;
               &lt;div class="span3"&gt;
                   &lt;p&gt;Some text&lt;/p&gt;
                   &lt;p&gt;Some text here too.&lt;/p&gt;
               &lt;/div&gt;
           &lt;/div&gt;
       &lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>
  
  <p>I tried this but not wortks:</p>
  
  <pre><code>.span6 .row{display: table;}
  .span6 .row .span3, .span6 .row figure{display:table-cell; vertical-align: middle;}
  </code></pre>
  
  <p>I tried this too:</p>
  
  <pre><code>.span6 .row .span3{display: inline-block; vertical-align: middle;}
  </code></pre>
  
  <p>None is working. Does somebody have an idea?
  Thanks in advance.</p>