超大屏幕图像未居中

Question

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>

Answer 1

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

Answer 2

If I'm not wrong, what you want to do here is make the image centered in the middle of your .jumbotron . For this, you can useCSS Flexbox :

 .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>

This will center the img in the exact center of the .jumbotron , both horizontally and vertically.

Cheers!