html - 在 div 中居中导航菜单

Question

我有一个下拉导航菜单，我需要在 div 中居中，但 text-align: center 不适合我。

该网站位于http://www.joekellywebdesign.com/churchsample1/index.html

HTML

<div id="navmenudiv">
   <ul id="navmenu">
      <li><a href="index.html">Home</a></li>
      <li>
         <a href="about.html">About Us</a>
         <ul class="sub1">
            <li><a href="introduction.html">Introduction</a></li>
            <li><a href="whoweare.html">Who We Are</a></li>
            <li><a href="staff.html">Staff</a></li>
         </ul>
      </li>
      <li>
         <a href="services.html">Services</a>
         <ul class="sub1">
            <li><a href="sundaymorning.html">Sunday Morning</a></li>
            <li><a href="sundayevening.html">Sunday Evening</a></li>
            <li><a href="wednesday.html">Wednesday Evening</a></li>
         </ul>
      </li>
      <li><a href="resources.html">Resources</a></li>
      <li><a href="contact.html">Contact Us</a></li>
      <li><a href="news.html">News and Events</a></li>
   </ul>
</div>

CSS

navmenudiv {
    z-index:60;
    margin: -30px 0;
    height:50px;
    background-color:#5340BF;
    top:40;position:
    relative;
    text-align:center;
}

Answer 1

这是一个简单的解决方案：

ul#navmenu li {
    float:left; /* REMOVE */
    display: inline-block; /* ADD */
}

目前，它们li是浮动的。通过将它们更改为inline-block元素，它们将居中 - 假设您已经text-align:center在父级上使用。

更新的 CSS：

ul#navmenu li {
    margin-right: 4px;
    text-align: center;
    width: 125px;
    display: inline-block;
    position: relative;
}

Answer 2

ul#navmenu li {
width: 125px;
text-align: center;
position: relative;
margin-right: 4px;
display: inline-block;
margin: 0 10px;
}