float left div container center

Question

Wie zentriere ich die div-Elemente? Sie schweben nur nebeneinander, aber nicht zentriert.

Die div-Elemente enthalten alle ein Bild fester Breite, unter dem Bild erscheint ein variabler Text.

<div id="wrapper"> 
<div style="max-width:900px;margin: 0 auto;"> 
<div style="width:100%;"> 


<div style="float:left;"><img src="img" width="250" height="150" ><br>This text goes under the Picture.</div> 
<div style="float:left;"><img src="img" width="250" height="150" ><br>This text goes under the Picture.</div> 
<div style="float:left;"><img src="img" width="250" height="150" ><br>This text goes under the Picture.</div> 
<div style="float:left;"><img src="img" width="250" height="150" ><br>This text goes under the Picture.</div> 
<div style="float:left;"><img src="img" width="250" height="150" ><br>This text goes under the Picture.</div> 
<div style="float:left;"><img src="img" width="250" height="150" ><br>This text goes under the Picture.</div> 
<div style="float:left;"><img src="img" width="250" height="150" ><br>This text goes under the Picture.</div> 

</div> 
</div> 

</div> 


#wrapper{ 

    margin: 0 auto; 
     width: 900px; 
    max-width: 100%; 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
} 

Vielen Dank.

Mit freundlichen Grüßen

Answer 1

Sie können die Schwimmer entfernen und display: flex; justify-content: center; flex-wrap: wrap; auf dem übergeordneten ... verwenden, und Sie brauchen nicht die 2 inneren divs, die die Zellen umhüllen.

#wrapper { 
 
    margin: 0 auto; 
 
    width: 900px; 
 
    max-width: 100%; 
 
    box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
}

<div id="wrapper"> 
 

 
    <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div> 
 
    <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div> 
 
    <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div> 
 
    <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div> 
 
    <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div> 
 
    <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div> 
 
    <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div> 
 
    <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div> 
 
    <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div> 
 

 
</div>

Answer 2

Da Sie einen div mit fester Breite haben, können Sie einfach die Position auf absolutes gesetzt, links auf 50% und Marge auf -450px (die Hälfte der Breite)

hier ein example

position:absolute; 
left:50%; 
margin:0 -450px; 

Answer 3

Statt der Schwimmer, verwenden display: inline-block; und gelten text-align:center zu ihrem Behälter:

#wrapper { 
 
    margin: 0 auto; 
 
    width: 900px; 
 
    max-width: 100%; 
 
    box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
} 
 

 
div>div>div { 
 
    display: inline-block; 
 
} 
 

 
div>div { 
 
    text-align: center; 
 
}

<div id="wrapper"> 
 
    <div style="max-width:900px;margin: 0 auto;"> 
 
    <div style="width:100%;"> 
 

 

 
     <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div> 
 
     <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div> 
 
     <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div> 
 
     <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div> 
 
     <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div> 
 
     <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div> 
 
     <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div> 
 

 
    </div> 
 
    </div> 
 

 
</div>

P. S .: Wenn Sie nicht die kleinen Räume zwischen dem DIVs mögen, können Sie jeden Schließen DIV (</div>) in der nächsten Zeile, direkt vor der nächsten Öffnung <div> bewegen. Dies hilft, den durch die Zeilenumbrüche im HTML-Code verursachten Leerraum zu vermeiden.