Html 如何将浮动列表项居中？

我有我的网站导航列表项目，我需要中心。我是浮动的，所以我可以在列表项上添加填充…将它们设置为内联似乎可以消除顶部和底部填充

<style type="text/css">

   #nav {
       width:100%;
   }

   #nav ul {
       margin-right: auto;
       margin-left: auto;
   }

   #nav ul li {
      float: left;
      background-color: #333;
      color: #fff;
      padding: 15px;
      margin: 10px;
   }

</style>

<div id='nav'>

   <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
  </ul>

</div>

#导航{
宽度：100%；
}
#导航ul{
右边距：自动；
左边距：自动；
}
#李国荣{
浮动：左；
背景色：#333；
颜色：#fff；
填充：15px；
利润率：10px；
}

项目1
项目2
项目3
项目4

尝试将CSS更改为：

#nav ul{

margin-right:auto;
margin-left:auto;
text-align:center;

}

#nav ul li{
display:inline;
background-color:#333;
color:#fff;
padding:15px;
margin:10px;

}

干杯

---

辛西娅

同样的事情我也经历过很多次

您不能使用%布局将任何内容居中，您必须以像素或ems为单位

所以我修改了代码，给div指定了一个特定的宽度，然后将其居中

`<div class="centerme">
      <!--put your stuff here-->
   </div>`   

`
`   

以下是JSFIDLE：

---

为ul提供宽度

用这个代替你的班级

   #nav ul {
       margin-right: auto;
       margin-left: auto;
       width:400px;
   }

---

通过使项目内联显示，然后可以将其作为文本对齐。设置行高修复了包装问题

 #nav{
        text-align: center;
        line-height:30px;

    }

    #nav li {
        list-style:none;
        margin: 0 5px;
        display:inline;
        border:gray solid 1px;
    }

---

可以在这里看到工作演示：

设置文本对齐：在

上居中，并使
• 显示：内联块。remove float wich与任何在流内容内居中的方法都不兼容。是的，我已经完全按照上面的注释解决了它。如果你担心你的li周围的填充物，不要使用内联。它将移除填充物。使用内联块似乎是更好的选择。同时赋予它内联和块的属性。这似乎包装得不太好。我对此投了反对票，因为是的，你可以用百分比布局来居中。