ブートストラップ4垂直配置の中心がフレックスレイアウトで動作しない

Question

ブートストラップ4を使用すると、3つの列を持つレスポンシブなレイアウトがあり、異なる画面サイズで順序、幅、および水平の配置を変更する必要があります。スクリーンサイズのimgの水平方向の中心合わせが< 768pxで動作しないことを除いて、すべてうまく動作します。私のサンプルコードで

.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：ここに私のコードです。期待される振る舞いは、両方のimgがそれぞれの列の垂直方向の中央に整列することです。スクリーンサイズ> 768pxでは、imgの列は自動的に左右に浮動します（col-md-auto）。これは予期されたものであり、変更すべきではありません。

どのようにスクリーンサイズで画像の列に画像を配置することができますか< 768px？

Vertical Align Center in Bootstrap 4のような同様の質問がありました。 mx-autoを設定する、d-flexを使ってコンテンツ中心を合わせる、一定の幅を設定する、など何も私のために働くようには見えません。私は何が欠けていますか？

Answer 1

イメージを含むdivにtext-align：centerを付けることができます。例えば ：仕事に.mx-autoについては

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

Answer 2

、あなたは.d-blockを必要としています。 Aligning images。

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