2017-12-02 23 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">