title: Vertical align text in bootstrap list-group
body: <p>I am trying to <code>vertical-align</code> the text and button in a <code>list-group-item</code> with bootstrap 3. I've tried to make the parent <code>a</code> to have <code>display: table;</code> and the inner divs a <code>display: table-cell;</code> so that I can use <code>vertical-align: middle</code>. </p>
  
  <p>But the above won't fix it, here's a <strong><a href="http://codepen.io/anon/pen/PqmQxe">codepen</a></strong> I've created that reproduces the problem. </p>
  
  <p>Although for some reason if I post the same code here in SO snippet it seems to be working. However, when I render that in my HTML document it won't work.
  <div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>a {
    overflow: hidden;
    display: table;
  }
  
  a &gt; div {
    display: table-cell; 
    vertical-align: middle; 
  }
  
  .btn {
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="container"&gt;
    &lt;div class="list-group"&gt;
      &lt;!-- ngRepeat: value in results --&gt;
      &lt;a href="/store/products/testing" class="list-group-item search-product ng-scope" ng-repeat="value in results"&gt;
        &lt;div class="media col-md-3"&gt;
          &lt;figure class="pull-left"&gt;
            &lt;img class="media-object img-rounded img-responsive" src="http://lorempixel.com/500/500" alt="Testing"&gt;
          &lt;/figure&gt;
        &lt;/div&gt;
        &lt;div class="col-md-6"&gt;
          &lt;h4 class="list-group-item-heading ng-binding"&gt; Test product &lt;/h4&gt;
          &lt;p class="list-group-item-text ng-binding" ng-bind-html="value.short_description | to_trusted"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et…&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="col-md-3 text-center"&gt;
          &lt;div ng-controller="postDataToCartCtrl" class="ng-scope"&gt;
            &lt;form url="store/addtocart" ng-submit="add(value.id, 1)" class="ng-pristine ng-valid"&gt;
              &lt;input name="quantity" type="hidden" value="1"&gt;
              &lt;button type="submit" class="btn btn-success"&gt;
                &lt;span class="glyphicon glyphicon-shopping-cart"&gt;&lt;/span&gt; Add to Cart
              &lt;/button&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/a&gt;
      &lt;!-- end ngRepeat: value in results --&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>