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

I have list items for my site nav that I need to center. I'm floating so that I can have padding on the list items...setting them to inline seems to eliminate top and bottom padding.

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

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

4 个解决方案

#1

By making the items display inline you can then align them as text. Setting the line height fixed wrapping issue.

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

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

    }

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

Working demo can be seen here: http://jsfiddle.net/AqRJA/1/

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

#2

Try changing your CSS to:

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

}

Cheers,

干杯，

Cynthia

辛西娅

#3

give width to ul

给ul的宽度

replace your class with this one

用这个替换你的班级

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

#4

I've been through the same thing sooooo many times.

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

You can't center anything with % layout, you have to be specific in pixels or ems.

您无法使用％layout布局任何内容，您必须具体为像素或ems。

So I changed your code to give the div a specific width and then centered it.

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

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

Here's the jsfiddle:

这是jsfiddle：

http://jsfiddle.net/EqNtH/

#1