ブートストラップを使用したカラムの中央メディアdiv

Question

私はhtmlテンプレートページを持っています。テンプレートには、ロゴとテキストを含むメディアオブジェクトがあります。両方の項目が5ワイドの列にある方法。それは中心からずれており、左に揃っています。私はメディアのブロックを取って、列の大きさにかかわらず列内に配置したい（5,7,9,12）。これを行うための最良の方法は何か。ここにhtmlコードがあります。私はブートストラップ3.3.7と4.0.0ベータの最新バージョンを使用しています。ここ

<div class="row"> 

    <div class="col-xl-5 col-lg-5"> 
     <div class="media"> 
     <img class="align-self-center mr-3 welcome-icon-size" src="{% static 'images/yap-logo-possible-1.png'%}" alt="Generic placeholder image"> 
     <div class="media-body"> 
      <h1 class="mt-0 welcome_title">Split Beta</h1> 
     </div> 
     </div> 
    </div> 

    </div> 

表示です：

Answer 1

私はあなただけの中心に内側の要素を整列させるために、あなたのcol-xl-5 col-lg-5にtext-centerクラスを配置し、ブートストラップを使用している見ることができるように。内部要素のスタイリングに独自のクラスlogoを使用できます。

.logo { 
 
    display: inline-block 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="row"> 
 
    <div class="col-xl-5 col-lg-5 text-center"> 
 
    <div class="logo"> 
 
     <img class="align-self-center mr-3 welcome-icon-size" src="http://via.placeholder.com/350x150" alt="Generic placeholder image"> 
 
     <h1 class="mt-0 welcome_title">Split Beta</h1> 
 
    </div> 
 
    </div> 
 
</div>