将navmenu集中在一个div内 [英] Centering navmenu within a div

问题描述

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

该网站是在 http://www.joekellywebdesign.com/churchsample1/index.html

HTML

 < div id = navmenudiv> 
< ul id =navmenu> 
< li>< a href =index.html>主页< / a>< / li> 
< li> 
< a href =about.html>关于我们< / a> 
< ul class =sub1> 
< li>< a href =introduction.html>简介< / a>< / li> 
< li>< a href =whoweare.html>我们是谁< / a>< / li> 
< li>< a href =staff.html>员工< / a>< / li> 
< / ul> 
< / li> 
< li> 
< a href =services.html>服务< / a> 
< ul class =sub1> 
< li>< a href =sundaymorning.html>星期天上午< / a>< / li> 
< li>< a href =sundayevening.html>星期日晚上< / a>< / li> 
< li>< a href =wednesday.html>周三晚上< / a>< / li> 
< / ul> 
< / li> 
< li>< a href =resources.html>资源< / a>< / li> 
< li>< a href =contact.html>与我们联系< / a>< / li> 
< li>< a href =news.html>新闻与活动< / a>< / li> 
< / ul> 
< / div> 
  

CSS

  navmenudiv {
 z-index：60; 
保证金：-30px 0; 
 height：50px; 
背景颜色：＃5340BF; 
 top：40;位置：
 relative; 
 text-align：center; 
 
  

解决方案

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

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

目前， li 是浮动的。如果你已经在使用 text-align：center 。

更新的CSS：

  ul＃navmenu li {
 margin-right：4px; 
 text-align：center; 
 width：125px; 
 display：inline-block; 
职位：亲属; 
} 
  

I have a drop down nav menu that I need to be centered within a div but text-align: center isn't working for me.

The site is at 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;
}

解决方案

Here is an easy solution:

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

Currently, the li are floating. By changing them to inline-block elements, they will center - given that you are already using text-align:center on the parent.

Updated CSS:

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

这篇关于将navmenu集中在一个div内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！