Vertical align text in bootstrap list-group

Question

I am trying to vertical-align the text and button in a list-group-item with bootstrap 3. I've tried to make the parent a to have display: table; and the inner divs a display: table-cell; so that I can use vertical-align: middle.

But the above won't fix it, here's a codepen I've created that reproduces the problem.

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.

a {
  overflow: hidden;
  display: table;
}

a > div {
  display: table-cell; 
  vertical-align: middle; 
}

.btn {
  width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="list-group">
    <!-- ngRepeat: value in results -->
    <a href="/store/products/testing" class="list-group-item search-product ng-scope" ng-repeat="value in results">
      <div class="media col-md-3">
        <figure class="pull-left">
          <img class="media-object img-rounded img-responsive" src="http://lorempixel.com/500/500" alt="Testing">
        </figure>
      </div>
      <div class="col-md-6">
        <h4 class="list-group-item-heading ng-binding"> Test product </h4>
        <p class="list-group-item-text ng-binding" ng-bind-html="value.short_description | to_trusted">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et…</p>
      </div>
      <div class="col-md-3 text-center">
        <div ng-controller="postDataToCartCtrl" class="ng-scope">
          <form url="store/addtocart" ng-submit="add(value.id, 1)" class="ng-pristine ng-valid">
            <input name="quantity" type="hidden" value="1">
            <button type="submit" class="btn btn-success">
              <span class="glyphicon glyphicon-shopping-cart"></span> Add to Cart
            </button>
          </form>
        </div>
      </div>
    </a>
    <!-- end ngRepeat: value in results -->

  </div>
</div>

Answer 1

I have modified your CSS code a bit

CSS

a.list-group-item {
  overflow: hidden;
  display: table;
}

a.list-group-item > div {
  display: table-cell; 
  vertical-align: middle; 
  float:none;
}

checkout above code. instead of a {} I have used a.list-group-item {} as default bootstrap .list-group-item {} class was overwriting display:table properties.