你能帮我用 CSS 将 <ul> 元素居中吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/544207/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can you help me center a <ul> element with CSS?
提问by Salim Fadhley
I've been puzzling over something which ought to be very easy indeed, but after a fruitless three hours I've not yet solved it:
我一直在困惑一些应该很容易的事情，但是经过三个小时的徒劳无功之后，我还没有解决它：
A friend asked me to fix the template of his WordPress websiteso that the horizontal navigation menu-bar is centered horizontally on the page. He wants it to fit snugly across the bottom-middle of the red-section - then it would just fit between the two emblems on either side of the red page.
一位朋友让我修复他的 WordPress 网站的模板，以便水平导航菜单栏在页面上水平居中。他希望它紧贴红色部分的底部中间——然后它就可以放在红色页面两侧的两个标志之间。
The red section (class="header") has text-alignset to center. This seems to be good enough to ensure that the title and the description text underneath it are center aligned but for some reason I cannot make the menu (which is a ul) align to the center of the page.
红色部分 ( class="header") 已text-align设置为center。这似乎足以确保标题和其下方的描述文本居中对齐，但由于某种原因，我无法使菜单（即ul）与页面中心对齐。
Would anybody care to suggest what I'm doing wrong? Why is it that I cannot get the menu centered? What is it that I need to change in the style-sheet to get it working?
有人愿意建议我做错了什么吗？为什么我无法将菜单居中？我需要在样式表中更改什么才能使其正常工作？
回答by Andrew Vit
To center a row of blocks, you should use inline-block:
要将一行块居中，您应该使用 inline-block：
ul.menu { display: block; text-align:center; }
ul.menu li { display: inline-block; }
IE doesn't understand inline-block, but if you set it inline just for IE, it'll still behave as an inline-block:
IE 不理解 inline-block，但如果你只为 IE 将它设置为 inline，它仍然会作为一个 inline-block：
<!--[if lt IE 8]>
ul.menu li { display: inline }
<![endif]-->
回答by Dashrath
1 Write style="text-align: center;"to parent divof ul
1个写style="text-align: center;"于母公司div的ul
2 Write style="display: inline-table;"to ul
2 写信style="display: inline-table;"给ul
2 Write style=" display: inline;"to li
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>
Finish
结束
回答by Mario Gonzales Flores
specified width for ul
ul{ width:700px; margin:0 auto;}
ul 的指定宽度
ul{ width:700px; margin:0 auto;}
回答by Glenn Slaven
Best way to do it is this:
最好的方法是这样的：
Wrap the ul in a new div id="topmenu" or something like that, then give this the following styles
将 ul 包装在一个新的 div id="topmenu" 或类似的东西中，然后给它以下样式
bottom:0;
position:absolute;
width:780px;
and give the ul.menu this
并给 ul.menu 这个
margin:0 auto;
width:535px;
The only gotcha here is that you're setting the width of the menu list, so if the width of the menu items change it will need to be changed in the CSS file too (ie if a new menu item is added.
这里唯一的问题是您正在设置菜单列表的宽度，因此如果菜单项的宽度发生变化，则它也需要在 CSS 文件中进行更改（即，如果添加了新的菜单项。
UPDATE:Just noticed your comment above about not setting the width manually. If you're willing to use a wee bit of javascript, you could stick this inside the document ready block and remove the width: 535px;
更新：刚刚注意到您上面关于不手动设置宽度的评论。如果您愿意使用一点点 javascript，您可以将其粘贴在文档就绪块中并删除width: 535px;
var sum = 0; jQuery('.menu').children().each(function() { sum += jQuery(this).outerWidth(); }); jQuery('.menu').css('width', sum + 30);
This will set the css width property to the actual rendered width once the page loads, so the layout will work.
一旦页面加载，这会将 css width 属性设置为实际呈现的宽度，因此布局将起作用。
Complete HTML below:
完整的 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>
回答by MK_Dev
Since it's positioned absolute, you can give it a left attribute:
因为它是绝对定位的，你可以给它一个 left 属性：
.menu { left: 125px; }
.menu { 左：125px; }
125px or so should be good
125px左右应该不错
