title: How to vertically center Bootstrap columns that are inside another column?
body: <p>I want to vertically center the divs inside <code>col-md-12</code>. This is the structure:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.list-item {
    border-bottom: 1px solid #e7e7e7;
    float: left;
    padding: 15px 0;
    width: 100%;
  }
  .list-item img {
    width: 60px;
    height: 60px;
  }
  .col-md-2 {
    float: left;
    width: 16.66666667%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="list-item col-md-12 clearfix"&gt;
    &lt;div class="col-md-1"&gt;
      &lt;img class="img-circle" src="https://aframe.io/aframe/examples/_skies/puydesancy.jpg"&gt;
    &lt;/div&gt;
    &lt;div class="col-md-2"&gt;
      &lt;strong&gt;
        &lt;a href="#/buildings/1"&gt;Central park&lt;/a&gt;
      &lt;/strong&gt;
    &lt;/div&gt;
    &lt;div class="col-md-5"&gt;
      &lt;span&gt;The description for central park description for the central park&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="col-md-2"&gt;
      &lt;span&gt;Category count:&lt;/span&gt;
      &lt;strong&gt;3&lt;/strong&gt;
    &lt;/div&gt;
    &lt;div class="col-md-2"&gt;
      &lt;span&gt;Panorama count:&lt;/span&gt;
      &lt;strong&gt;7&lt;/strong&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tried: <code>vertical-align: middle</code> and <code>display: inline</code> but it didn't work. Is there another way?</p>
  
  <p>Here's the JSFiddle: <a href="https://jsfiddle.net/wLgfLo3L/" rel="nofollow">https://jsfiddle.net/wLgfLo3L/</a></p>
  
  <p>(You need to resize the browser to full screen).</p>