[CSS]Display block vs inline - błędne centrowanie lub rozmiar Opcje

[eiliat]

Witam,

Mam głównego DIV-a na stronie, którego szerokość jest dynamiczna (to pierwsze z utrudnień). Chcę wyświetlać w nim bloki o stałych rozmiarach (500x500). W jednym wierszu będzie tyle boksów ile starczy miejsca, te które się nie zmieszczą wędrują niżej itd.

Rozsądne wydaje się zastosowanie bloków więc kodzę:

[CSS] pobierz, plaintext 
.container {
    margin: 0 auto;   	
    display: block;	
    float: left;
    padding: 5px;	
}
 
.box {
    color: #fff;
    padding: 10px;
    margin: 10px;
    width: 500px;
    height: 500px;
    font-size: 16px;
    float: left;
}
[CSS] pobierz, plaintext 

Wyświetlają się boxy o zadanych rozmiarach jednak są wyrównane do lewej. Szukam rozwiązania w internecie - głównie oparte są o stałą szerokość co u mnie odpada lub zmiana na inline-block. No dobra, robię zmianę na inline-block. Boxy się centrują jednak rozwalają mi się ich rozmiary a raczej pozycjonowanie - zależnie od ilości treści jeden jest wyżej, drugi jest niżej itd.

Jak pogodzić obie metody aby bloki miały stałe rozmiary i były wycentrowane?

[trueblue]

Nie wiem czy dobrze Cię rozumiem, ale dodaj vertical-align:top dla elementów, którym nadajesz display:inline-block.

[fate]

text-align:center do kontenera
http://jsfiddle.net/QLAb5/