如何中心浮动列表项？ [英] How do I center floated list items?

问题描述

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

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>

推荐答案

作为文本。设置行高固定换行问题。

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

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

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

这篇关于如何中心浮动列表项？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！