Question

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

但上面没有解决它，这是我创建的 codepen ，可以重现问题。

虽然由于某些原因，如果我在SO片段中发布相同的代码，它似乎正在工作。但是，当我在HTML文档中呈现它时，它不会起作用。

＆＃13;

a {
  overflow: hidden;
  display: table;
}

a > div {
  display: table-cell; 
  vertical-align: middle; 
}

.btn {
  width: 100%;
}

＆＃13;

<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>

＆＃13;

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属性。

Answer 2

只需删除div上的浮点数，例如：

wait

引导列表组

2 个答案: