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;    
}

How to place this sections in one line and centered?

Answer 1

I hope this is what you wanted: http://jsfiddle.net/thirtydot/ypce8/

My answer is more complicated than it could have been for two reasons:

• I’m assuming the number of items is not fixed.
• I included support for IE6/7 (assuming you’re already using html5shiv or similar).

#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
}