comment centrer les éléments dynamiquement dans un div

Question

donné un contenant avec des objets à l'intérieur comme ceci:

<div id="container"> 

    <div class="item">Item</div> 
    <div class="item">Item</div> 
    <div class="item">Item</div> 
    <div class="item">Item</div> 
    <div class="item">Item</div> 
    <div class="item">Item</div> 
    <div class="item">Item</div> 
    <div class="item">Item</div> 

</div> 

#container { 
    width: 600px; 
    border: 1px solid #CCC; 
} 

#container .item { 
    background: red; 
    display:inline-block; 
    width: 50px; 
    height: 50px; 
} 

http://jsfiddle.net/zrhLt/

Est-il possible avec CSS (pas JS) à centrer automatiquement les articles avec des marges égales. Sans avoir à utiliser une table?

Merci

Answer 1

Ajout text-align:center; aux centres de conteneurs affiche tous les éléments.

Vous ne voulez pas utiliser une table, mais vous pouvez toujours dire au navigateur pour le rendre comme une table :-) Alors que diriez-vous CSS:

#container { 
    width: 600px; 
    border: 1px solid #CCC; 
    display: table; 
    border-spacing:20px 0; /* this is the value that controls the margin */ 
} 

#container .item { 
    background: red; 
    display: table-cell; 
    width: 50px; 
    height: 50px; 
} 

Answer 2

Vous pouvez jouer avec le marges comme celle-ci:

#container { 
    width: 600px; 
    border: 1px solid #CCC; 

} 

#container .item { 
    background: red; 
    display:inline-block; 
    width: 50px; 
    height: 50px; 
    margin-left: 1.4%; 
    margin-right: 1.4%; 
} 

Jouer un Fiddle: http://jsfiddle.net/zrhLt/9/