Jumbotron Bild ist nicht zentriert

Question

Ich habe den folgenden Code für die Kopfzeile. Das Bild wird nicht zentriert, wenn ich zu verschiedenen Größen wechsle. Wie kann ich das Bild für alle Größenansichten zentrieren?

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

Answer 1

Sie mit diesem ändert sich auf dem CSS-Datei verwenden können:

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

Oder diese, spezifischere (I bevorzugen):

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

Answer 2

Wenn ich mich nicht falsch, was Sie möchten, dass das Bild in der Mitte Ihrer .jumbotron zentriert wird. Dazu können Sie verwenden CSS 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>

Dies wird die img genau in der Mitte des .jumbotron Zentrum, sowohl horizontal als auch vertikal.

Prost!