2017-12-02 29 views
0

使用Bootstrap 4,我有一个响应式布局,包含3列,(应该)在不同的屏幕尺寸上更改顺序,宽度和水平对齐。它所有的工作,只是在屏幕大小< 768px的IMGS的水平居中对齐不正常工作。这里是我的代码:Bootstrap 4垂直对齐中心无法在柔性布局上工作

.icon-xl-large { 
 
    width: 80px; 
 
} 
 

 
.w-400px { 
 
    max-width: 400px; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="row justify-content-center justify-content-md-between"> 
 
    <div class="order-md-1 col-6 col-md-auto align-self-center"> 
 
    <img src="http://via.placeholder.com/350x350" alt="" class="icon-xl-large mx-auto" > 
 
    </div> 
 
    <div class="order-md-3 col-6 col-md-auto align-self-center"> 
 
    <img src="http://via.placeholder.com/350x350" alt="" class="icon-xl-large mx-auto" > 
 
    </div> 
 
    <div class="col-12 order-md-2 col-md-6 w-400px text-center"> 
 
    <h5>Sample text in center</h5> 
 
    </div> 
 
</div>

在我的例子代码在2列IMGS都左对齐。预期的行为应该是两个imgs垂直居中排列在各自的列中。在大于768px的屏幕上,imgs的列自动浮动到左侧和右侧(col-md-auto)。这是预期的,不应该改变。

我该如何将imgs居中显示在屏幕上的列中< 768px?

我发现了类似的问题,比如Vertical Align Center in Bootstrap 4和尝试过各种建议的解决方案,例如设置mx-auto,使用d-flex对齐内容中心,设置固定宽度等等。没有任何东西可以用于我。我错过了什么?

回答

1

你可以给包含图像的div:文本对齐:中心。 例如:

@media (max-width: 768px) { 
    .col-6.col-md-auto.align-self-center { 
     text-align:center; 
    } 
} 
1

对于.mx-auto工作,你需要.d-blockAligning images

<img src="http://via.placeholder.com/350x350" alt="" class="icon-xl-large mx-auto d-block">