Bootstrap 4垂直对齐中心无法在柔性布局上工作

使用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对齐内容中心，设置固定宽度等等。没有任何东西可以用于我。我错过了什么？

来源

2017-12-02 tealowpillow

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

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

来源

2017-12-02 19:07:29

对于.mx-auto工作，你需要.d-block。 Aligning images。

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

来源

2017-12-02 19:09:23

Bootstrap 4垂直对齐中心无法在柔性布局上工作

回答

相关问题