你能帮我用CSS集中一个<ul>元素吗？
我一直在困惑的事情应该是非常容易的，但经过了三个小时的努力，我还没有解决它：
一位朋友要求我修复他的WordPress网站的模板，以便水平导航菜单栏在页面上水平居中。 他希望它紧贴红色部分的底部中间 – 那么它将适合在红色页面的两侧的两个标志之间。
红色部分（ class="header" ）将text-align设置为center 。 这似乎足以确保标题和它下面的描述文字是居中alignment，但由于某种原因，我不能使菜单（这是一个ul ）alignment到页面的中心。
有人会build议我做错了吗？ 为什么我无法使菜单居中？ 什么是我需要改变样式表才能使它工作？
要将一行块居中，您应该使用内联块：
ul.menu { display: block; text-align:center; } ul.menu li { display: inline-block; }
IE浏览器不能理解内联块，但是如果你只是为IE设置内联，它仍然可以作为一个内联块：
<!--[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;} ul{ width:700px; margin:0 auto;}
既然它是绝对定位的，你可以给它一个左边的属性：
.menu {left：125px; }
125px左右应该是好的
