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

cch 发表于 Dev

cch

我试图vertical-align在文字和按钮list-group-item与引导3.我试图让家长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>

Nilesh Mahajan

我已经修改了您的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属性。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。