Problem mit Zentrierung von DIV

[lascaux]

Hier erstmal der Quellcode

section        {  width: 95%;  max-width: 1510px;  min-width: 760px;  margin: 20px auto;  background: #000;}
div#wrapper    {  padding: 5px;  margin: auto;}
div.small-cube {  height: 240px;  width: 240px;  margin: 5px;  float: left;  background: blue;}
div.large-cube {  height: 240px;  width: 490px;  margin: 5px;  float: left;  background: red;}

<section>
  <div id="wrapper">
    <div class="small-cube"></div>
    <div class="large-cube"></div>
    <div class="small-cube"></div>
<!-- usw. -->
  </div>
</section>

Meine Frage hierzu ist nun, wie ich den Inhalt vom Wrapper, unabhängig wie breit der Browser ist, Zentriert anzeigen kann. Ich habe es zwar mit display: inline-block; probiert, aber das Ergebnis war eine Katastrophe. Die Blöcke wurden nur dann in einer Reihe angezeigt, solange kein Inhalt vorhanden war.


Das wäre der CSS-Quelltext zu der Methode mit dem inline-block:

section        {  width: 95%;  max-width: 1522px;  min-width: 760px;  margin: 20px auto;  background: #000;}
div#wrapper    {  padding: 5px;  margin: auto;  text-align: center;}
div.small-cube {  height: 240px;  width: 240px;  margin: 5px;  display: inline-block;  background: blue;}
div.large-cube {  height: 240px;  width: 490px;  margin: 5px;  display: inline-block;  background: red;}

Damit ihr seht, was ich meine, häng ich noch einen Screenshot ran





Ich verwende ein Skript um die Voreinstellungen von jeglichen Browsern beim CSS zuvor auf 0 zu setzen (CSS Reset).


Kann ich dieses Verschieben des DIV-Elements irgendwie unterbinden wenn ich inline-block verwende?


Für Lösungsvorschläge und kleine Denkanstöße wär ich euch sehr dankbar.



lascaux

 

[threadi]

Belass es ohne display-Angabe und gib dem #wrapper noch eine feste Breite. Nur dann wirkt auch die Angabe "margin: 0 auto;".

 

[lascaux]

Die Lösung ist mir soeben gekommen.


Threadi, danke. Aber die Breite soll sich dynamisch bis auf die maximale Breite X anpassen, damit mehr Elemente in einer Reihe angezeigt werden können. Dass margin: auto; eine feste Breite braucht, ist mir sehr wohl bekannt :)



Zur Lösung (falls jemand das selbe Problem haben sollte):

Man fügt einfach noch ein:

vertical-align: top;

ein, dann wird der Anker-Punkt der inline-block Elemente nach oben gesetzt.