Question

<div class="row topRow" >
            <div class="col-md-3 upperMember">
                <img class="img-fluid upperMemberImg" 
src="http://via.placeholder.com/100x100">
            </div>
            <div class="col-md-3 upperMember">
                <img class="img-fluid upperMemberImg col-md-offset-1" 
src="http://via.placeholder.com/100x100">
            </div>
            <div class="col-md-3 upperMember">
                <img class="img-fluid upperMemberImg" 
src="http://via.placeholder.com/100x100">
            </div>
        </div>

我试图将整行移到中心。我知道你可以把它变成col-md-4，但这会增加图像的大小，我需要col-md-3的特性

Answer 1

试试这段代码：

.row.topRow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
   -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
   -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

Answer 2

请参阅https://v4-alpha.getbootstrap.com/layout/grid/#alignment

基本上class="col-md-3 align-self-center"会做到这一点

要对行class="row align-items-center"

进行垂直对齐

Answer 3

最简单的方法是将text-center添加到.col-md-3 div

<div class="col-md-3 upperMember text-center">
    ...
</div>

将div中的div移动到中心

3 个答案: