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垂直對齊中心無法在柔性佈局上工作

回答

相關問題