如何将水平<UL>菜单居中对齐？
如何将水平<UL>菜单居中对齐？
提问于 2010-05-19 20:21:52
我需要居中对齐一个水平菜单。
我尝试了各种解决方案，包括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来完成这项工作吗？
回答 17
Stack Overflow用户
回答已采纳
发布于 2010-05-20 08:12:28
来自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>
Stack Overflow用户
发布于 2010-05-19 20:45:42
这对我很有效。如果我没有误解你的问题，你可以试一试。
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>
Stack Overflow用户
发布于 2015-05-07 02:17:16
使用CSS3 flexbox。很简单。
ul {
display: flex;
justify-content: center;
}
ul li {
padding: 0 8px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2865380
复制相关文章
相似问题