我如何居中对齐菜单中的项目？

如何在菜单中心对齐WITHIN项目？（该li S）我设法中心我的网站的页面内的菜单（ul），但我不能在菜单（主页，关于等）为中心的实际项目我如何居中对齐菜单中的项目？

可以编辑我的HTML /此处的CSS：http://jsfiddle.net/66reH/
要查看结果

CSS/HTML：

#nav { 
 
\t font-family: Century Gothic, Arial, Helvetica, sans-serif; 
 
\t font-size: 15px; 
 
\t color: #fff; 
 
\t margin-left:auto; 
 
\t margin-right:auto; 
 
\t background-color: #eee; 
 
\t padding: 5px; 
 
\t height: 38px; 
 
\t width: 913px; 
 
\t font-weight: bold; 
 
\t border-style:solid; 
 
\t border-width:4px; 
 
\t border-color: #000; 
 
} 
 
#nav ul { 
 
\t padding: 0px; 
 
\t margin-top: 0px; 
 
\t margin-right: 0px; 
 
\t margin-bottom: 0px; 
 
\t margin-left: 170px; 
 
} 
 
#nav ul li { 
 
\t list-style-type: none; 
 
\t text-align: center; 
 
\t float: left; 
 
\t margin: 0px; 
 
} 
 
#nav ul li a { 
 
\t text-decoration: none; 
 
\t color: #000; 
 
\t text-align: center; 
 
\t display: block; 
 
\t padding: 10px; 
 
\t margin: 0px; 
 
} 
 
#nav ul li a:hover { 
 
\t color: #CD0000; 
 
}

<div id="nav" align="center"> 
 
    <ul> 
 
    <li><a href="#">HOME</a></li> 
 
    <li><a href="#">ABOUT</a></li> 
 
    <li><a href="#">TOUR</a></li> 
 
    <li><a href="#">NEWS</a></li> 
 
    <li><a href="#">PRESS</a></li> 
 
    <li><a href="#">PHILANTHROPY</a></li> 
 
    <li><a href="#">JOBS</a></li> 
 
    <li><a href="#">CONTACT</a></li> 
 
    </ul> 
 
</div>

来源

2012-11-25 user1850463

删除align属性的#nav DIV
添加text-align: center;到#nav选择CSS
删除margin-left属性为ul选择CSS
加'text-align: center;到ul选择CSS
删除li选择器上的float: left;属性选择器CSS
add display: inline-block;到li选择器CSS

您没有居中的菜单。您只需在CSS的UL左侧添加170px，因此它的排序看起来以为中心。但事实并非如此。

DEMO HERE

来源

2012-11-25 02:14:55 Scott

它看起来居中吗？ http://www.bensabicprojects.ca/about.php – user1850463

看起来非常集中。似乎距离右边5px左右。这可能是由于对li项目或其他css的填充。 – Scott

有没有办法解决这个问题？ – user1850463

CSS/HTML

#nav { 
 
    font-family: Century Gothic, Arial, Helvetica, sans-serif; 
 
    font-size: 15px; 
 
    color: #fff; 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
    background-color: #eee; 
 
    padding: 5px; 
 
    height: 38px; 
 
    width: 913px; 
 
    font-weight: bold; 
 
    border-style:solid; 
 
    border-width:4px; 
 
    border-color: #000; 
 
} 
 
#nav ul { 
 
    padding: 0px; 
 
    margin-top: 0px; 
 
    margin-right: 0px; 
 
    margin-bottom: 0px; 
 
} 
 
#nav ul li { 
 
    list-style-type: none; 
 
    text-align: center; 
 
    float: left; 
 
    margin: 0px; 
 
} 
 
#nav ul li a { 
 
    text-decoration: none; 
 
    color: #000; 
 
    text-align: center; 
 
    display: block; 
 
    padding: 10px; 
 
    margin: 0px; 
 
} 
 
#nav ul li a:hover { 
 
    color: #CD0000; 
 
} 
 
.outer { 
 
    float: right; 
 
    right: 50%; 
 
    position: relative; 
 
} 
 
.inner { 
 
    float: right; 
 
    right: -50%; 
 
    position: relative; 
 
} 
 
.clearboth { 
 
    clear:both; 
 
}

<div id="nav" align="center"> 
 
      
 
    <div class="outer"> 
 
    <ul class="inner"> 
 
     <li><a href="#">HOME</a></li> 
 
     <li><a href="#">ABOUT</a></li> 
 
     <li><a href="#">TOUR</a></li> 
 
     <li><a href="#">NEWS</a></li> 
 
     <li><a href="#">PRESS</a></li> 
 
     <li><a href="#">PHILANTHROPY</a></li> 
 
     <li><a href="#">JOBS</a></li> 
 
     <li><a href="#">CONTACT</a></li> 
 
    </ul> 
 
    </div> 
 
    <div class="clearboth"></div> 
 
</div>

demo

了解更多关于定心：

Centering a div

来源

2012-11-25 02:23:33 Iamowrange

我如何居中对齐菜单中的项目？

回答

相关问题