2つのイメージをブートストラップ列の中心に合わせる

Question

私はhtmlテンプレートを持っており、ブートストラップをその中に統合したいと思っています。私は現在、ブートストラップの列に2つのイメージを持っています。私は、2つのイメージを列の真中に置いておきながら、それらのイメージを整列させてお互いに並べて保持したいと考えています。私がそれを試してみると、それらを中心にしたり、お互いの上に中心を置いたりしません。私はここに私のコードがある...両方の画像が中心と隣同士にしたい：ここ

<div class="row justify-content-center"> 

     <div class="col-xl-6"> 
      <img class="welcome-icon-size align-top center-block" src="{% static 'images/untitled-2.png'%}" alt="Generic placeholder image"> 
      <img class="welcome-name-size no-margin-top center-block" src="{% static 'images/untitled-1.png'%}" alt="Generic placeholder image"> 
     </div> 

    </div> 

は、CSSです：

：ここ

.no-margin-top { 
    margin-top: 0px !important; 
} 

.no-padding { 
    padding: 0em !important; 
} 

.welcome-icon-size { 
    height: 9.55em !important; 
} 

.welcome-name-size { 
    height: 14em !important; 
} 

.welcome_title { 
    font-size: 1em !important 
} 

.welcome-center-items { 
    align-items: center !important; 
} 

.center-block { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 

は私のイメージのように見えるものです

私はそれが次のようになりたいけど::

0を中心にこれらは列の左

Answer 1

ALIGN-トップのCSSがある？に整列される上方枚の

画像がスクリーンの中心にされていませんか私はこのクラスが何をするのか分かりません。 このお試しください：

あなたのイメージから

• 削除ALIGN-トップと縁なしのトップクラスは、あなたが好きな私の-ALIGNまたは名前を付けたクラスを追加します（ただし、CSSのクラス名は同じでなければなりません -

  .my-align { margin:0;padding:0;width:50%;float:left; } 
  

  は、あなたが望むもの、それである：？

とCSSで、それはのようになります）ということを覚えていますか