引导列表组中的垂直对齐文本

Question

我正在尝试使用引导程序3中vertical-align的文本和按钮list-group-item.我已经尝试使父项a具有display: table;内部div,display: table-cell;以便我可以使用vertical-align: middle.

但上面的内容不会修复它,这是我创建的一个可以重现问题的codepen.

虽然出于某种原因,如果我在SO片段中发布相同的代码,它似乎工作.但是,当我在HTML文档中呈现它时,它将无法工作.

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

我稍微修改了你的 CSS 代码

CSS

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

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

检查上面的代码。而不是a {}我使用a.list-group-item {}默认引导.list-group-item {}类来覆盖display:table属性。