你能帮我用CSS把<ul>元素居中吗？
你能帮我用CSS把<ul>元素居中吗？
提问于 2009-02-13 00:28:46
我一直在为一些本应非常容易的事情而困惑，但在毫无结果的三个小时后，我还没有解决它：
一位朋友要求我修复his WordPress website的模板，以便水平导航菜单栏在页面上水平居中。他希望它贴合在红色部分的底部-中间-然后它将恰好适合红色页面两边的两个徽标之间。
红色部分(class="header")的text-align设置为center。这似乎足以确保标题和下面的描述文本居中对齐，但由于某些原因，我无法使菜单(这是一个ul)与页面中心对齐。
有人愿意建议我哪里做错了吗？为什么我不能让菜单居中？我需要在样式表中进行哪些更改才能使其正常工作？
回答 3
Stack Overflow用户
发布于 2009-02-13 00:40:29
要使一行块居中，应使用inline-block：
ul.menu { display: block; text-align:center; }
ul.menu li { display: inline-block; }IE不理解inline-block，但是如果你只为IE设置inline，它仍然会表现为一个inline-block：
<!--[if lt IE 8]>
ul.menu li { display: inline }
<![endif]-->Stack Overflow用户
发布于 2012-08-30 04:09:15
1将style="text-align: center;"写入ul的父div
2将style="display: inline-table;"写入ul
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>完成
Stack Overflow用户
发布于 2014-03-25 00:20:38
为ul ul{ width:700px; margin:0 auto;}指定的宽度
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/544207
复制相关文章
相似问题