如何居中alignment水平<UL>菜单？
我需要居中alignment一个水平菜单。
我尝试了各种解决scheme，包括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>
UPDATE
我知道如何在divalignmentul 。 这可以用Sarfraz的build议来完成。 但是列表项目仍然在ul内部左侧浮动。
我是否需要使用Javascript才能完成此操作？
从http://pmob.co.uk/pob/centred-float.htm ：
前提是简单的，基本上只涉及一个宽度浮动包装，浮动到左侧，然后转移到左侧的宽度位置：相对; 左：-50％。 接下来，将嵌套的内部元件倒转，并施加+ 50％的相对位置。 这具有将元素放置在中心的效果。 相对定位保持stream动并允许其他内容在下面stream动。
码
#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>
这对我有用。 如果我没有误解你的问题，你可以试试看。
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>
用CSS3 flexbox。 简单。
ul { display: flex; justify-content: center; } ul li { padding: 0 8px; }
这是我find的最简单的方法。 我用你的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>
这里有一篇关于如何以一种非常稳固的方式来完成的好文章，没有任何黑客和全面的跨浏览器支持。 适用于我：
– > http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
像这样做 ：
<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; }
像你们中的很多人一样，我一直在为此苦苦挣扎。 解决scheme最终必须处理含有UL的div。 所有关于改变UL的填充，宽度等的build议都没有效果，但是下面做了。
这是关于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; }
尝试这个：
div.topmenu-design ul { display:block; width:600px; /* or whatever width value */ margin:0px auto; }
一般来说，居中黑色元素（如<ul> ）的方法是使用margin:auto; 属性。
要在块级元素内alignment文本和内联级元素，请使用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 */ }
应该工作。
附带的情况是Internet Explorer6 …或甚至不使用<!DOCTYPE>其他IE。 IE6使用text-align错误地alignment块级元素。 所以，如果你正在寻求支持IE6（或不使用<!DOCTYPE> ），你的完整解决scheme是…
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属性不能包含空格…？ 事实上， W3Cbuild议将 id属性定义为“名称”types …
ID和NAME标记必须以字母（[A-Za-z]）开始，后面跟随任意数量的字母，数字（[0-9]），连字符（“ – ”），下划线（“_”） ，冒号（“：”）和句点（“。”）。
我使用了display：inline-block属性：解决scheme是使用固定宽度的包装器。 里面，带有内嵌块的ul块显示。 使用这个，ul只需要真正的内容的宽度！ 最后是margin：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%; }
Omg这么干净。
我用这个jQuery代码。 （可选解决scheme）
$(document).ready(function() { var margin = $(".topmenu-design").width()-$("#topmenu").width(); $("#topmenu").css('margin-left',margin/2); });
div { text-align: center; } div ul { display: inline-table; }
ul作为内联表修复了问题。 我用父div来alignment文本居中。 这种方式，即使在其他语言（翻译，不同的宽度）
@ Robusto的解决scheme是我尝试做的最简单的方法，我build议你使用它。 我试图做一个无序的列表中的图像做同样的事情，使一个画廊…我做了一个js小提琴来骗过它。 随意尝试在这里。
[它是使用robusto的示例代码设置的]
HTML：
<div id="centerDiv"> <ul class="centerUL"> <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150> </a> </li> <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150"></a> </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; }
ul{margin-left:33%}
在大屏幕上是一个体面的近似值。 它不好，但一个很好的修复。
.topmenu-design { display: inline-table; }
这一切！
