Center-inline-Blöcken mit dynamischer Breite in CSS
Also.. ich habe eine dynamische Breite Seite. Unterhalb der wrapper-div zentriert den divs drin. Jedoch, jedes div hat einen Stil von:
display:inline-block;
width:400px; /* static */
Dieser macht das innere divs, nebeneinander. Das heißt aber auch, dass es einige Leerzeichen Links über je nach Breite des browser und wie viele divs kann gehen Seite an Seite, ohne zu brechen in die nächste Zeile.
Bekommen Sie eine Ahnung von dem, was ich bin für gehen, öffnen Sie Ihren Google Chrome-Neuer Tab " - Seite und ziehen Sie Ihr browser-Fenster kleiner machen. Sie werden sehen, dass, wenn Sie zu weit gehen, einige der chrome-apps stoßen an die nächste Zeile, ABER es bleibt immer noch zentriert.
In meinem Fall, Sie stoßen auf die nächste Zeile und nicht zentriert.
Dies ist, was mein code sieht wie folgt aus:
<div class="wrapper">
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
</div>
Will ich die inneren divs zu werden, Seite an Seite, es sei denn, es gibt nicht genug Platz in dem Fall am Ende wird man eine Beule auf der nächsten Zeile nach unten, während Sie zentriert bleiben in der übergeordneten div.
Vielen Dank für jede Hilfe.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wenn ich dich richtig verstanden hinzufügen
text-align: center
zu Ihrem.wrapper
styles geben sollte den gewünschten Effekt. Sehen diese Geige für ein Beispiel. Die Größe des Ergebnis-panel zu beobachten, die die Neuordnung der Boxen.Wie Akaishen bereits erwähnt inline-Blöcke flow wie text. Das ist, warum Sie können Steuern, Ihre Ausrichtung mit
text-align
. Allerdings, wenn Sie sehr feine Kontrolle über Ihr layout möglicherweise Probleme mit der Verwendung von inline-Blöcke. Da Sie flow wie text Leerzeichen zwischen Ihnen nicht ignoriert, zum Beispiel. Und leider kann man nicht wirklich bestimmen Sie die absolute Breite eines Raumes zwischen den Browsern und Betriebssystemen. Die Lücken zwischen den Blöcken in meinem Beispiel sind durch diese verursacht werden.Als Sie die
display: inline-block
die<div>
tags sind im Grunde inline-Elemente und kann gestylt werden wie solche.text-align: center
würde Mitte jedes element. An diesem Punkt benötigen Sie einen container /wrapper, um die maximale und minimale Breite.Könnte es einen besseren Weg, das zu erreichen, was Sie suchen, und das ist nicht genau wie man die Chrome-Fenster arbeiten, aber es ist ein Anfang: fiddle
<div>
tag ist nicht eine Natürliche inline-element. Im IE7, erhalten Sie eine Reihe von vertikalen Kästen. Sie können mehr darüber Lesen Sie hier. Viel Glück!