Question

我对HTML / CSS比较陌生，所以请随意纠正我（可能）犯下的任何其他错误。这是我的HTML和CSS：http://jsfiddle.net/luxurymode/PrjJ3/3/

我想要做的就是在“导航栏”中水平居中UL。这是正确的方法吗？

编辑：我不小心贴错了小提琴。现在这是正确的......

Answer 1

正确的方法是

#topbar ul {
    width: /* exact width of the ul */;
    margin: 0 auto;
}

DEMO

另一种方式是

#topbar {
    text-align: center;
}

#topbar ul {
    display: inline-block;    
}

但inline-block不是100％x-browser证明。

DEMO

Answer 2

如果您始终知道ul的值，请使用前几个答案中的示例。如果您不知道宽度是多少，则必须使用稍微不同的方法。将您的float:left;更改为display:inline;，然后将text-align:center;添加到您的文章中。

Answer 3

一种简单的方法是给列表一个宽度并将边距设置为0 auto：

#topbar ul {
    list-style-type: none;  
    margin:0 auto;   
    width:300px  
}

Answer 4

第一：对于带内联块的浏览器兼容性（IE＆amp; FF），请使用：

display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;

所以在#nav li中，删除float：left并将其设为：

#nav li {
    display:-moz-inline-stack;
    display:inline-block;
    zoom:1;
    *display:inline;
    border-right: 1px solid #fff;
    box-shadow: 1px 0 0 rgba( 255, 255,255, 0.1);
}

然后以Nav为中心

#nav {
    padding: .5em;
    height: 55px;  
    width: 650px;
    background-color: #325A8C;
    text-align: center;

}

在div中水平居中的正确方法是什么？

4 个答案: