如何居中浮动列表项？答案

【问题标题】：How do I center floated list items?如何居中浮动列表项？
【发布时间】：2013-06-20 10:29:20
【问题描述】：

我有需要居中的站点导航列表项。我浮动，以便我可以在列表项上进行填充...将它们设置为内联似乎可以消除顶部和底部填充。

<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>

【问题讨论】：

在
- 显示：inline-block。删除浮动与任何在流内容中居中的方式都不兼容。
是的，我已经完全按照上面的评论解决了。 jsfiddle.net/gleezer/EqNtH/1
如果您担心 li 周围的填充，请不要使用 inline。它将删除填充。使用 inline-block 似乎是一个更好的案例。赋予它内联和块的属性。

标签： html css center

【解决方案1】：

通过使项目内联显示，您可以将它们对齐为文本。设置行高固定换行问题。

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

    }

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

工作演示可以在这里看到：http://jsfiddle.net/AqRJA/1/

【讨论】：

【解决方案2】：

尝试将您的 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;

}

干杯，

辛西娅

【讨论】：

这似乎不太好包装。

【解决方案3】：

为ul提供宽度

用这个替换你的类

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

【讨论】：

【解决方案4】：

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

您不能使用 % 布局来居中，您必须以像素或 em 为单位。

所以我改变了你的代码，给 div 一个特定的宽度，然后将它居中。

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

这是 jsfiddle：

http://jsfiddle.net/EqNtH/

【讨论】：

我对此投了反对票，因为是的，您可以使用百分比布局来居中。