CSS 如何居中对齐水平 <UL> 菜单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2865380/
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
How do I center align horizontal <UL> menu?
提问by Steven
I need to center align a horizontal menu.
I've tried various solutions, including the mix of inline-block/ block/ center-alignetc., but haven't succeeded.
我需要居中对齐水平菜单。
我尝试了各种解决方案，包括inline-block/ block/center-align等的组合，但都没有成功。
Here is my code:
这是我的代码：
<div class="topmenu-design">
<!-- Top menu content: START -->
<ul id="topmenu firstlevel">
<li class="firstli" id="node_id_64"><div><a href="#"><span>Om kampanjen</span></a></div></li>
<li id="node_id_65"><div><a href="#"><span>Fakta om inneklima</span></a></div></li>
<li class="lastli" id="node_id_66"><div><a href="#"><span>Statistikk</span></a></div></li>
</ul>
<!-- Top menu content: END -->
</div>
UPDATE
更新
I know how to center align the ulwithin the div. That can be accomplished using Sarfraz's suggestion.
But the list items are still floated left within the ul.
我知道如何ul在div. 这可以使用 Sarfraz 的建议来完成。但是列表项仍然在ul.
Do I need Javascript to accomplish this?
我需要Javascript来完成这个吗？
采纳答案by reisio
From http://pmob.co.uk/pob/centred-float.htm:
来自http://pmob.co.uk/pob/centred-float.htm：
The premise is simple and basically just involves a widthless float wrapper that is floated to the left and then shifted off screen to the left width position:relative; left:-50%. Next the nested inner element is reversed and a relative position of +50% is applied. This has the effect of placing the element dead in the center. Relative positioning maintains the flow and allows other content to flow underneath.
前提很简单，基本上只涉及一个无宽度的浮动包装器，该包装器向左浮动，然后移出屏幕到左宽度位置：相对；左：-50%。接下来嵌套的内部元素被反转并应用 +50% 的相对位置。这具有将元素放置在中心的效果。相对定位保持流动并允许其他内容在下方流动。
Code
代码
#buttons{
float:right;
position:relative;
left:-50%;
text-align:left;
}
#buttons ul{
list-style:none;
position:relative;
left:50%;
}
#buttons li{float:left;position:relative;}/* ie needs position:relative here*/
#buttons a{
text-decoration:none;
margin:10px;
background:red;
float:left;
border:2px outset blue;
color:#fff;
padding:2px 5px;
text-align:center;
white-space:nowrap;
}
#buttons a:hover{ border:2px inset blue;color:red;background:#f2f2f2;}
#content{overflow:hidden}/* hide horizontal scrollbar*/<div id="buttons">
<ul>
<li><a href="#">Button 1</a></li>
<li><a href="#">Button 2's a bit longer</a></li>
<li><a href="#">Butt 3</a></li>
<li><a href="#">Button 4</a></li>
</ul>
</div>回答by Robusto
This works for me. If I haven't misconstrued your question, you might give it a try.
这对我有用。如果我没有误解你的问题，你可以试一试。
div#centerDiv {
width: 100%;
text-align: center;
border: 1px solid red;
}
ul.centerUL {
margin: 2px auto;
line-height: 1.4;
padding-left: 0;
}
.centerUL li {
display: inline;
text-align: center;
}<div id="centerDiv">
<ul class="centerUL">
<li><a href="http://www.amazon.com">Amazon 1</a> </li>
<li><a href="http://www.amazon.com">Amazon 2</a> </li>
<li><a href="http://www.amazon.com">Amazon 3</a></li>
</ul>
</div>回答by Daishi Nakajima
With CSS3 flexbox. Simple.
使用 CSS3 弹性盒。简单的。
ul {
display: flex;
justify-content: center;
}
ul li {
padding: 0 8px;
}
回答by Shawin
This is the simplest way I found. I used your html. The padding is just to reset browser defaults.
这是我找到的最简单的方法。我用了你的html。填充只是重置浏览器默认值。
ul {
text-align: center;
padding: 0;
}
li {
display: inline-block;
}<div class="topmenu-design">
<!-- Top menu content: START -->
<ul id="topmenu firstlevel">
<li class="firstli" id="node_id_64">
<div><a href="#"><span>Om kampanjen</span></a>
</div>
</li>
<li id="node_id_65">
<div><a href="#"><span>Fakta om inneklima</span></a>
</div>
</li>
<li class="lastli" id="node_id_66">
<div><a href="#"><span>Statistikk</span></a>
</div>
</li>
</ul>
<!-- Top menu content: END -->
</div>回答by michaeldwp
Here's a good article on how to do it in a pretty rock-solid way, without any hacks and full cross-browser support. Works for me:
这是一篇很好的文章，介绍了如何以一种非常坚如磐石的方式做到这一点，没有任何黑客攻击和全面的跨浏览器支持。对我有用：
--> http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
--> http://matthewjamestaylor.com/blog/beautiful-css-central-menus-no-hacks-full-cross-browser-support
回答by Neal Ganslaw
Like so many of you, I've been struggling with this for a while. The solution ultimately had to do with the div containing the UL. All suggestions on altering padding, width, etc. of the UL had no effect, but the following did.
像你们中的许多人一样，我已经为此苦苦挣扎了一段时间。解决方案最终与包含 UL 的 div 有关。所有关于改变 UL 的填充、宽度等的建议都没有效果，但以下内容有效。
It's all about the margin:0 auto;on the containing div. I hope this helps some people, and thanks to everyone else who already suggested this in combination with other things.
这都是关于margin:0 auto;包含 div 的。我希望这对某些人有所帮助，并感谢其他已经将其与其他事物结合起来提出建议的人。
.divNav
{
width: 99%;
text-align:center;
margin:0 auto;
}
.divNav ul
{
display:inline-block;
list-style:none;
zoom: 1;
}
.divNav ul li
{
float:left;
margin-right: .8em;
padding: 0;
}
.divNav a, #divNav a:visited
{
width: 7.5em;
display: block;
border: 1px solid #000;
border-bottom:none;
padding: 5px;
background-color:#F90;
text-decoration: none;
color:#FFF;
text-align: center;
font-family:Verdana, Geneva, sans-serif;
font-size:1em;
}
回答by Boris Guéry
Do it like this :
像这样做 ：
<div id="footer">
<ul>
<li><a href="/1.html">Link 1</a></li>
<li><a href="/2.html">Link 2</a></li>
<li><a href="/3.html">Link 3</a></li>
<li><a href="/4.html">Link 4</a></li>
<li><a href="/5.html">Link 5</a></li>
</ul>
</div>
And the CSS:
和 CSS：
#footer {
background-color:#ccc;
height:39px;
line-height:36px;
margin:0 auto;
text-align:center;
width:950px;
}
#footer ul li {
display:inline;
font-family:Arial,sans-serif;
font-size:1em;
padding:0 2px;
text-decoration:none;
}
回答by Sarfraz
Try this:
尝试这个：
div.topmenu-design ul
{
display:block;
width:600px; /* or whatever width value */
margin:0px auto;
}
回答by grantex
Demo - http://codepen.io/grantex/pen/InLmJ
演示 - http://codepen.io/grantex/pen/InLmJ
<div class="navigation">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Menu</a></li>
<li><a href="">Others</a></li>
</ul>
</div>
.navigation {
max-width: 700px;
margin: 0 auto;
}
.navigation ul {
list-style: none;
display: table;
width: 100%;
}
.navigation ul li {
display: table-cell;
text-align: center;
}
.navigation ul li a {
padding: 5px 10px;
width: 100%;
}
Omg so much cleaner.
天哪，干净多了。
回答by Richard JP Le Guen
Generally speaking the way to center a black level element (like a <ul>) is using the margin:auto;property.
一般来说，将黑电平元素（如 a <ul>）居中的方法是使用margin:auto;属性。
To align text and inline level elements within a block level element use text-align:center;. So all together something like...
要在块级元素中对齐文本和内联级元素，请使用text-align:center;. 所以所有的东西都像......
ul {
margin:auto;
}
ul li {
text-align:center;
list-style-position:inside; /* so that the bullet points are also centered */
}
ul li div {
display:inline; /* so that the bullet points aren't above the content */
}
... should work.
... 应该管用。
The fringe case is Internet Explorer6... or even other IEs when not using a <!DOCTYPE>. IE6 incorrectly aligns block level elemnts using text-align. So if you're looking to support IE6 (or not using a <!DOCTYPE>) your full solution is...
边缘情况是 Internet Explorer6 ... 甚至其他 IE 在不使用<!DOCTYPE>. IE6 使用text-align. 因此，如果您希望支持 IE6（或不使用<!DOCTYPE>），那么您的完整解决方案是...
div.topmenu-design {
text-align:center;
}
div.topmenu-design ul {
margin:auto;
}
div.topmenu-design ul li {
text-align:center;
list-style-position:inside; /* so that the bullet points are also centered */
}
div.topmenu-design ul li div {
display:inline; /* so that the bullet points aren't above the content */
}
As a footnote, I think id="topmenu firstlevel"is invalid as an idattribute can't contain spaces... ? Indeed the w3c recommendation definesthe idattribute as a 'name' type...
作为脚注，我认为id="topmenu firstlevel"无效，因为id属性不能包含空格......？实际上，w3c 建议将该id属性定义为“名称”类型......
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").
ID 和 NAME 标记必须以字母 ([A-Za-z]) 开头，后面可以跟任意数量的字母、数字 ([0-9])、连字符 ("-")、下划线 ("_") 、冒号 (":") 和句点 (".")。
