Fließende Elemente horizontal mit zentrierter Ausrichtung in einem Container

Question

Mein Dilemma ist dies (und sollte einfach sein, ich vermute): Ich habe einen Container und eine Reihe von Elementen (beide divs). Das folgende CSS gilt:

.container { 
    float:   left; 
    width:   100%; 
} 


.item { 
    margin:   32px; 
    text-align:  center; 
    position:  relative; 
    float:   left; 
} 

Die .item selbst ist ein Container, der fast jeden Satz von beliebigen Elementen haben könnte, aber sie müssen in der es Mitte ausgerichtet werden (in meinem Fall enthält es in der Regel ein Miniaturbild und eine kleine Textunterschrift darunter. Während das obige CSS jedem .item erlaubt, horizontal so zu fließen, wie ich es mag, kann ich nicht herausfinden, wie man das ganze Set-Center ausgerichtet macht (im Gegensatz zum Fluss von links nach rechts wie jetzt).

Answer 1

bearbeiten
ändern .item { display: block; } zu .item { display: inline-block; }, nehmen .item { float:left; } weg und fügen text-align: center;-.container

Sie es hier sehen: http://jsfiddle.net/JMC_Creative/RQrRb/

Sie auch eine .inner div mit width:75%; margin: 0 auto; setzen könnte und dann setzen Sie Ihre .item s in dass, wenn Sie etwas Platz an den Seiten haben wollen.

Answer 2

Sie sollten sich dieses Tutorial von Mozilla anschauen. Es kann Zentrum nur durch Setzen des übergeordneten Container zu text-align:center;

Cross Browser Inline Block

Answer 3

.container {
width: 100%;
}

.item {
margin: 32px;
text-align: center;
}ausgerichtet sein,