セクションを1行にする方法は？

Question

HTML：

<section id="grid"> 
    <aside class="grid"> 
     <img class="img" src="i/img.jpg" /> 
     <p></p> 
    </aside> 
    <aside class="grid"> 
     <img class="img" src="i/img.jpg" /> 
     <p></p> 
    </aside> 
    <aside class="grid"> 
     <img class="img" src="i/img.jpg" /> 
     <p></p> 
    </aside>  
</section> 

CSS：

#grid{ 
    margin:50px 0 0 10px; 
    width:100%; 
    text-align:center; 
} 
.grid{ 
    margin-left:20px; 
    margin:0 auto; 
    width:300px;  
} 

1行でこのセクションを配置し、中央にする方法？

Answer 1

私はこれがあなたが望んで願っています：

• 私はアイテムの数が固定されていないと仮定しています：http://jsfiddle.net/thirtydot/ypce8/

  私の答えは、それは二つの理由だったかもしれないよりも複雑です。

• IE6/7のサポートが含まれています（既にhtml5shivなどを使用していることを前提としています）。

#grid { 
    margin: 50px 0 0 10px; 
    width: 100%; 
    text-align: center; 
    zoom: 1; 
    border: 1px dashed #f0f 
} 
.grid { 
    border: 1px solid red; 
    margin-left: 16px; 
    width: 300px; 
    vertical-align: top; 
    display: inline-block; 
    /*if you need ie6/7 support*/ 
    *display: inline; 
    zoom: 1 
} 
.grid:first-child { 
    margin-left: 0 
} 
.grid img { 
    display: block 
} 

Answer 2

は

#grid{ 
    margin:50px 0 0 10px; 
    width:100%; 
    text-align:center; 
    border:1px solid red; 
} 

.container { 
    width:906px; 
    margin:0 auto; 
    border:1px solid green; 
} 

.grid{ 
    margin-left:20px; 
    margin:0 auto; 
    width:300px; 
    float:left; 
    border:1px solid blue; 
} 

<section id="grid"> 
    <div class="container"> 
    <aside class="grid"> 
     <img class="img" src="i/img.jpg" /> 
     <p></p> 
    </aside> 
    <aside class="grid"> 
     <img class="img" src="i/img.jpg" /> 
     <p></p> 
    </aside> 
    <aside class="grid"> 
     <img class="img" src="i/img.jpg" /> 
     <p></p> 
    </aside> 
    </div> 
</section>