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.

Answer 2

Just remove the floats, on the divs, ie like this:

a > div {
 float: none !important;
}