如何集中对齐浮动:左侧ul/li导航菜单与css？

Question

所以我有以下CSS来显示水平导航栏使用:

.navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.navigation li {
  float: left;
  margin: 0 1.15em;
  /*    margin: 0 auto;*/
}

.navigation {
  /*    width: auto;*/
  /*    margin: 0 auto;*/
  text-align: center;
}

我的问题是:如何将标题上方的导航栏对齐？

Answer 1

这是一个不需要指定ul宽度的解决方案.

Answer 2

给你的.navigation ul一个宽度并使用margin:0 auto;

.navigation ul 
{
  list-style: none;
  padding: 0;
  width: 400px;
  margin: 0 auto;
}

Answer 3

好吧,要使用margin:0 auto某些东西,它必须有一个定义的宽度.可能最好的解决方法是:

ul li {
  display: inline;
  list-style-type: none;
}
ul {
  text-align:center;
}

Answer 4

有一些设置,如float,margin,可能会影响此代码正常工作.它也适用于IE7.我从CSS Wizardry的一篇文章中得到了这段代码.

.navigation ul 
{
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;/*make this change*/
 }
.navigation li
 {
    float: none;/*make this change*/
    display:inline;/*make this change*/
    margin: 0 1.15em;
 /* margin: 0 auto; */
 }
 .navigation li a {
    display:inline-block;/*make this change*/
 }
 .navigation 
 {
  /*width: auto;*/
  /*margin: 0 auto;*/
    text-align: center;
 }