CSS Center Float

Question

快点，我可能在这里很傻但是无论如何：

我有一个带边距的中心导航，这里有一个链接列表，我遇到的问题是因为我的所有<li>类都给了css：float:left他们对齐了在左边。

E.G：

我想知道的是，是否有任何方法可以将这些中心化？

由于

CSS：

section#nav {
    height: 45px;
    margin-bottom:5px;
    text-align:center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
nav {
    max-width: 700px;
    height: 45px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    margin: 0 auto;
}

nav ul {
    padding:12px 15px;
    margin:0 auto;
    text-align:center;
    overflow:hidden;
}

nav ul li {
    font-size:14px; 
    float:left;
}

nav ul li a {
    color: #FFFFFF;
    margin:0 10px;  
    transition: all 0.5s ease-out !important; 
    -moz-transition: all 0.5s ease-out !important;
    -ms-transition: all 0.5s ease-out !important; 
    -webkit-transition: all 0.5s ease-out !important; 
    -o-transition: all 0.5s ease-out !important;
}

nav ul li a.nav-path-selected {
    border-bottom:1px #ffffff solid;
}

nav ul li a.nav-path-selected {
    border-bottom:1px #ffffff solid;
    color:#FFFFFF !important;
}

nav ul li a:hover {
    color:#CCCCCC !important;
    transition: all 0.5s ease-out !important; 
    -moz-transition: all 0.5s ease-out !important;
    -ms-transition: all 0.5s ease-out !important; 
    -webkit-transition: all 0.5s ease-out !important; 
    -o-transition: all 0.5s ease-out !important;
}

HTML：

<section id="nav">
  <nav>
    <ul class="nav">
      <li class="nav-selected nav-path-selected">
        <a class="nav-selected nav-path-selected" href="/">Home</a>
      </li>
      <li>
        <a href="/about/">About Us</a>
      </li>
      <li>
        <a href="/opportunities/">Opportunities</a>
      </li>
      <li>
        <a href="/inspiration/">Inspiration</a>
      </li>
      <li>
        <a href="/members/">Members</a>
      </li>
    </ul>
  </nav>
</section>

Answer 1

你可以这样

ul{
    display:block;
    width:100%;
    text-align:center;
}

ul>li{
    display:inline;
}

使用display：inline而不是display：inline-block可能不会影响外观，但允许在IE 7上正确显示

点击jsfiddle.net/kmcYE/2

Answer 2

把你的＆lt; ul＆gt; ＆lt;里面的元素div>然后在页面上调整div的大小和居中。只要将div设置为显式宽度值（例如菜单项的宽度），然后将div的右边距和左边距设置为auto，它就会自动居中。

Answer 3

如果在li css：

上，则需要进行唯一调整

请参阅此working Fiddle示例。

添加

display:inline-block;

删除

float:left;

Answer 4

给nav ul display: inline-block;一个属性。这会将列表缩小到其内容的宽度，并将其水平居中于其包含元素中。

示例：http://jsfiddle.net/VMqUe/

Answer 5

谢谢大家，我已经结合你的答案来构建解决方案：

nav ul {
    padding:12px 15px;
    margin:0 auto;
    text-align:center;
    overflow:hidden;
}

nav ul li {
    font-size:14px; 
    display:inline-block;
    display:inline;
}