你能帮我用CSS中心一个<ul>元素吗？

Question

我一直在为一些应该非常容易的东西感到困惑,但是在一个没有结果的三个小时之后我还没有解决它:

一位朋友让我修复了他的WordPress网站的模板,以便水平导航菜单栏在页面上水平居中.他希望它能够舒适地穿过红色部分的底部中间 - 然后它将恰好适合红色页面两侧的两个标志.

红色部分(class="header")已text-align设置为center.这似乎足以确保其下方的标题和描述文本居中对齐但由于某种原因我无法使菜单(即a ul)与页面中心对齐.

有人会建议我做错了吗？为什么我不能让菜单居中？我需要在样式表中进行哪些更改才能使其正常工作？

Answer 1

要使一行块居中,您应该使用内联块:

ul.menu { display: block; text-align:center; }
ul.menu li { display: inline-block; }

IE不理解内联块,但如果你只为IE设置内联,它仍然会表现为内联块:

<!--[if lt IE 8]>
ul.menu li { display: inline }
<![endif]-->

Answer 2

1写style="text-align: center;"于母公司div的ul

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>

完

Answer 3

由于它是绝对定位的，因此您可以给它一个 left 属性：

.menu { 左：125px; }

125px左右应该不错