Having Trouble With Centering Multiple “div” Elements

Question

I have a web page with 5 div elements and I'm trying to center these divs in the middle of the screed. (flexible mode). This image describes my goal. please help me if you can.

http://www.mediafire.com/view/8v8acb404ikbfja/3.jpg

And this is my CSS codes that belongs to the left image:

#container{
    clear: both;
    border: 3px dashed red;
}

#container .divs{
    width: 360px;
    height: 230px;
    margin: 60px;
    float: left;
    overflow: hidden;
    border-radius: 30px;
    border: 3px dashed red;
}

Answer 1

Remove the floats and make the divs display:inline-block then add text-align:center to the #container

JSfiddle Demo

Answer 2

use display: inline-block; instead float:left;