我如何中心对齐水平 < UL > 菜单？

我需要中心对齐一个水平菜单。
我尝试了各种解决方案，包括 inline-block/block/center-align等混合方案，但都没有成功。

这是我的代码:

<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>

更新

我知道如何在 div中将 ul居中对齐。这可以使用 Sarfraz 的建议来完成。 但是列表项仍然浮动在 ul中。

我需要 Javascript 来完成这个吗？

504730 次浏览
小开

试试这个:

div.topmenu-design ul
{
display:block;
width:600px; /* or whatever width value */
margin:0px auto;
}
小开

这对我有用。如果我没有误解你的问题，你可以试一试。

    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>&nbsp;&nbsp;</li>
<li><a href="http://www.amazon.com">Amazon 2</a>&nbsp;&nbsp;</li>
<li><a href="http://www.amazon.com">Amazon 3</a></li>
</ul>
</div>

小开

这样做:

   <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>

还有 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;
}
小开

一般来说，使黑色级别元素(如 <ul>)居中的方法是使用 margin:auto;属性。

对齐块级元素中的文本和内联级元素使用 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 */
}

应该可以。

边缘案例是 InternetExplorer6... ... 甚至其他工业工程师时，不使用 <!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 */
}

作为一个脚注，我认为 id="topmenu firstlevel"是无效的，因为 id属性不能包含空格... ？事实上，W3C推荐标准定义了的 id属性作为一个 “名称”类型..。

ID 和 NAME 标记必须以 字母([ A-Za-z ]) 任意数量的字母、数字 ([0-9]) ，连字符(“-”) ，下划线 (“ _”)、冒号(“ :”)和句号 (".").

小开
最佳答案

来自 http://pmob.co.uk/pob/centred-float.htm:

前提很简单，基本上只涉及到一个无宽度的浮动包装器，浮动到左边，然后移出屏幕到左边的宽度位置: 相对; 左边: -50% 。接下来，嵌套的内部元素被反转，并应用 + 50% 的相对位置。这样做的效果是将元素置于中心死角。相对定位维护流，并允许其他内容在下面流动。

密码

#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>

小开

和你们很多人一样，我为此挣扎了一段时间。解决方案最终与包含 UL 的 div 有关。所有关于改变 UL 的填充、宽度等的建议都没有效果，但下面的建议有效。

这一切都与包含 div 的 margin:0 auto;有关。我希望这对一些人有所帮助，并且感谢每一个已经提出这个建议和其他事情相结合的人。

.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;
}
小开

这里有一篇很好的文章，介绍如何在没有任何黑客攻击和完全跨浏览器支持的情况下，以一种非常坚固的方式来做到这一点。对我有用:

- > http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

小开

我使用 display: inline-block 属性: 解决方案包括使用一个固定宽度的包装器。在内部，ul 块带有用于显示的 inline-block。使用这个，ul 只是为真正的内容采取宽度！最后边距: 0 auto，使这个 inline-block =)居中

/*ul wrapper*/
.gallery_wrapper{
width:          958px;
margin:         0 auto;
}
/*ul list*/
ul.gallery_carrousel{
display:        inline-block;
margin:         0 auto;
}
.contenido_secundario li{
float:          left;
}
小开

示范 -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%;
}

我的天，干净多了。

小开

@ 罗布斯托的解决方案对于我要做的事情来说是最简单的，我建议你使用它。我正在尝试做同样的事情在一个无序的图像列表，使一个画廊... 我作出了一个 js 小提琴摆弄它。欢迎来到 试试这里。

[它是使用 Robusto 的样本代码建立的]
HTML: < br > 

<div id="centerDiv">
<ul class="centerUL">
<li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150>         </a>&nbsp;&nbsp;</li>
<li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150"></a>&nbsp;&nbsp;</li>
<li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150"></a></li>
</ul>
</div>


CSS:

div#centerDiv {
width: 700px;
text-align: center;
border: 1px solid red;
}
ul.centerUL {
margin: 2px auto;
line-height: 1.4;
}
.centerUL li {
display: inline;
text-align: center;
}
小开

我使用 jquery 代码来完成这个任务(备选解决方案)

    $(document).ready(function() {
var margin = $(".topmenu-design").width()-$("#topmenu").width();
$("#topmenu").css('margin-left',margin/2);
});
小开 
.topmenu-design
{
display: inline-table;
}

仅此而已！

小开 
div {
text-align: center;
}
div ul {
display: inline-table;
}

我使用父 div 将文本对齐到居中位置。 这样即使在其他语言(翻译，不同的宽度)看起来也很好

小开 
ul{margin-left:33%}

在大屏幕上是一个不错的近似值。它不好，但是一个很好的脏修复。

小开

这是我找到的最简单的方法。我使用你的 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>

小开

带有 CSS3柔性盒，很简单。

ul {
display: flex;
justify-content: center;
}


ul li {
padding: 0 8px;
}
小开

对我有效的方法是将 li项目的 display属性设置为 inline-flex:

li {
display: inline-flex;
}
<ul>
<li>Item 1</li>
<li>Item 1</li>
</ul>

你可以选择将 justify-content: center加入到 li中，将 padding: 0加入到 ul中来使事情变直。


提交答案