将div水平对齐页面中心

Question

我有这段HT​​ML代码:

<div id="main" style=" margin:0 auto; ">
    <div style="float: left">
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
    </div>
    <div style="float: left">
        <a style="display: block;" href="#"><img src="ursus.gif"></a>
    </div>
    <div style="float: left">
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
    </div>
</div>

我希望#main div在页面的中心对齐.我这么干嘛？谢谢!

Answer 1

你必须width为div 设置一个:

<div id="main" style="margin:0 auto; width:700px;">

我也强烈建议你不要使用内联css.在外部样式表中添加类似这样的内容:

#main {
   margin:0 auto;
   width:700px;
}
#main a {
   display:block;
}
#main > div {
   float:left;
}