边距自动、浮动和父高度

Question

经过多次研究和测试，我仍然不明白如何正确修复 margin-auto & float:left 问题。

你可以在这里找到我的代码： http://jsfiddle.net/pierrearfarf/6VfMh/

使用此解决方案，div #projets 没有高度，我不知道如何解决此问题。 视觉上我的解决方案有效，但似乎很奇怪。谁能告诉我是否有更好的解决方案？

HTML

<div id="main">
    <div id="content_wrapper">
        <div id="projets">
            <ul id="projets_content">
                <li class="projet">test 1</li>
                <li class="projet">test 2</li>
                <li class="projet">test 2</li>
            </ul>
        </div>
   </div>
</div> 

CSS

#main{
float:left;
width:100%;
margin:0px;
padding:0px;    
}
#content_wrapper{
float:left;
    width:100%;
border:1px solid cyan;
margin-top:15px;
}

#projets{
width:160px;
border:1px solid black;
margin:10px auto;
}   

ul#projets_content{
float:left;
width:100%;
padding:0px;
border:1px solid blue;
list-style:none;
text-align:left;
}

ul#projets_content li {
width:35px;
margin:0px;
border:1px solid red;
float: left;
}

Answer 1

http://jsfiddle.net/6VfMh/1/

我添加了以下内容

#projets {
    display: inline-block;
}

和

#content_wrapper {
   text-align: center;
}