ジャンボトロン画像が中央に配置されていません

Question

私はヘッダに次のコードを書いています。異なるサイズに変更すると画像が中央に配置されません。どのようにしてすべてのサイズビューの画像を中央に配置できますか？

<div class="jumbotron"> 
     <img src="images/header.jpg" alt="Banner" class="img-responsive"> 
    </div> 

Answer 1

あなたは、これはあなたのCSSファイルに変更して使用することができます。

// Center all elements in jumbotron, if <img> is not in display block 
.jumbotron{ 
    text-align:center; 
} 

またはこの、より具体的な（私は好む）：

// Set the <img> in display block and use margin auto to center 
.jumbotron img{ 
    display:block; 
    margin-left:auto; 
    margin-right:auto; 
} 

Answer 2

私は間違っていないよ場合には、どのようなあなたがここでやりたいのは、あなたのイメージの中心にあなたの.jumbotronを置くことです。これは、水平方向と垂直方向の両方、.jumbotronの正確な中心にimgを中心に説明する

.jumbotron { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="jumbotron"> 
 
    <img src="images/header.jpg" alt="Banner" class="img-responsive"> 
 
</div>

： このためには、CSS Flexboxを使用することができます。

乾杯！