css - 如何使用 .css 使我的导航居中

Question

美好的一天 我正在尝试将我的导航菜单置于我网站的中心，有人可以帮忙吗？

我知道如何更改颜色和其他东西，但以前从未将导航居中

谢谢

代码如下:

/* Navigation
--------------------------------------------------------------------------------*/

#topnav {
clear: left;
margin: 0;
overflow: hidden;
}

#topnav ul {
list-style: none;
float: left;
}

#topnav ul li {
list-style: none;
float: left;
padding: 0 2px 0 0;
}

#topnav a {
float: left;
display: block;
color: #FFFFFF;
background: #00B0F0;
text-decoration: none;
font-family: "Actor", "Myriad Pro", Arial, Helvetica, sans-serif;
padding: 10px 15px 11px;
font-size: 15px;
border: 0;
outline: 0;
margin: 0;
list-style-type: none;
text-transform: uppercase;
line-height: 1;
}

#topnav li#active a,
#topnav a:hover {
color: #FFFFFF;
background: #00B0F0;
border: 0;
}

这是与导航相关的 HTML 代码:

function initFlyouts(){initPublishedFlyoutMenus([{"id":"609790714960572849","title":"Home","url":"index.html"},{"id":"853266533690851204","title":"About us","url":"about-us.html"},{"id":"809862556966585268","title":"Pricing","url":"pricing.html"},{"id":"201576304336620950","title":"&#1593;&#1585;&#1576;&#1610;","url":"1593158515761610.html"}],'609790714960572849',"<li class='wsite-nav-more'><a href='#'>more...<\/a><\/li>",'active',false)}

和

<div id="topnav">
            <ul><li id='active'><a href='/index.html'>Home</a></li><li id='pg853266533690851204'><a href='/about-us.html'>About us</a></li><li id='pg809862556966585268'><a href='/pricing.html'>Pricing</a></li><li id='pg201576304336620950'><a href='/1593158515761610.html'>&#1593;&#1585;&#1576;&#1610;</a></li></ul>
            <div style="clear:both"></div>
        </div>

Answer 1

如果你不想在你的菜单中使用固定宽度，并且想要 IE7 支持，你可以试试这个:http://jsfiddle.net/7K74B/1/

实现此行为的步骤

1. 删除所有float:left; css 中的引用(以防止内容向左浮动 - 不居中)

2. 删除 display:block;来自 <a>标签(以防止标签占用 100% 的宽度)。

3. 设置display:inline;至 <li>标签(将它们并排放置)。

4. 设置text-align:center;至 <ul>最终让您的菜单居中!

希望这对您有所帮助!

注意:如果您使用此解决方案:因为您已删除所有 float引用，您也可以删除此标记:<div style="clear:both"></div> ，因为没有要清除的 float 元素。