[英]Bootstrap 4 vertical align a list-group with some text and dropdown
[英]Vertical align text in bootstrap list-group
我试图将list-group-item
的文本和按钮与引导程序3 vertical-align
。我试图让父项a
display: table;
内部划分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>
我稍微修改了你的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
属性。
只需删除div上的浮点数,即:
a > div {
float: none !important;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.