css - 你能帮我用 CSS 将 元素居中吗？

Question

我一直在想一些本来应该很容易的事情，但是在毫无结果的三个小时之后我还没有解决它:

有 friend 让我修复his WordPress website的模板以便水平导航菜单栏在页面上水平居中。他希望它紧贴红色部分的底部中间 - 然后它正好适合红色页面两侧的两个标志之间。

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

有人愿意提出我做错了什么吗？为什么我无法让菜单居中？我需要在样式表中更改什么才能使其正常工作？

Answer 1

要使一行 block 居中，您应该使用 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]-->