html - 超大屏幕图像未居中

Question

我有以下标题代码。当我更改为不同尺寸时，图像不居中。如何使所有尺寸 View 的图像居中。

  <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;
}