我一直在为一些应该很容易的事情感到困惑，但是经过三个小时的无果之后我还没有解决它：
一位朋友让我修复his WordPress website的模板，使水平导航菜单栏在页面上水平居中。他希望它紧贴红色部分的底部中间 - 然后它正好适合红页两侧的两个标志之间。
红色部分 (class="header") 将 text-align 设置为 center。这似乎足以确保标题和其下方的描述文本居中对齐，但由于某种原因，我无法使菜单（ul）与页面中心对齐。
有人愿意建议我做错了什么吗？为什么我不能让菜单居中？我需要在样式表中进行哪些更改才能使其正常工作？
【问题讨论】：
标签： css navigation html-lists center
要将一行块居中，您应该使用 inline-block：
ul.menu { display: block; text-align:center; }
ul.menu li { display: inline-block; }
IE 不理解 inline-block，但如果你只为 IE 将其设置为 inline，它仍然会表现为 inline-block：
<!--[if lt IE 8]>
ul.menu li { display: inline }
<![endif]-->
【讨论】：
1 将style="text-align: center;" 写给ul 的父div
2 将style="display: inline-table;" 写入ul
2 将style=" display: inline;" 写入li
<div class="menu">
<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
</ul>
</div>
<style>
.menu { text-align:center; }
.menu ul { display:inline-table;}
.menu ul li {display:inline;}
</style>
完成
【讨论】：
最好的方法是：
将 ul 包装在一个新的 div id="topmenu" 或类似的东西中，然后给它以下样式
bottom:0;
position:absolute;
width:780px;
然后给 ul.menu 这个
margin:0 auto;
width:535px;
这里唯一的问题是您正在设置菜单列表的宽度，因此如果菜单项的宽度发生变化，也需要在 CSS 文件中进行更改（即，如果添加了新的菜单项。
更新：刚刚注意到您上面关于不手动设置宽度的评论。如果您愿意使用一点点 javascript，您可以将其粘贴在文档就绪块中并删除 width: 535px;
var sum = 0; jQuery('.menu').children().each(function() { sum += jQuery(this).outerWidth(); }); jQuery('.menu').css('width', sum + 30);
一旦页面加载，这会将 css 宽度属性设置为实际呈现的宽度，因此布局将起作用。
下面的完整 HTML：
<div id="header">
<h1 class="blog-title"><a href="http://www.hootingyard.org/" accesskey="1">Hooting Yard</a></h1>
<p class="description">A Website by Frank Key</p>
<div id="topmenu">
<ul class="menu">
<li class="current_page_item"><a href="http://www.hootingyard.org/" title="Prose, etc">Prose, etc</a></li>
<li class="page_item page-item-533"><a href="http://www.hootingyard.org/archivepage" title="Archives">Archives</a></li>
<li class="page_item page-item-534"><a href="http://www.hootingyard.org/books" title="Books">Books</a></li>
<li class="page_item page-item-551"><a href="http://www.hootingyard.org/regarding-mr-key" title="Regarding Mr Key">Regarding Mr Key</a></li>
<li class="page_item page-item-1186"><a href="http://www.hootingyard.org/subscriptions" title="Subscriptions">Subscriptions</a></li>
<li class="admintab"><a href="http://www.hootingyard.org/wp-login.php?action=register">Register</a></li>
</ul>
</div>
</div>
【讨论】：
为 ul 指定的宽度
ul{ width:700px; margin:0 auto;}
【讨论】：
由于它是绝对定位的，你可以给它一个left属性：
.menu { 左：125px; }
125px左右应该不错
【讨论】：