超大屏幕图像未居中 [英] jumbotron image is not centered

问题描述

我有以下标头代码。当我更改为其他尺寸时，图像未居中。如何在所有尺寸的视图中居中放置图像。

I have the following code for the header. The image is not centered when I change to different sizes. How can I center the image for all size views.

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

推荐答案

您可以在CSS文件中使用此更改：

You can use with this changes on your css file :

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

或者更具体（我更喜欢）：

Or this, more specific (I prefer) :

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

这篇关于超大屏幕图像未居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！