css - 你能帮我用 CSS 将 <ul> 元素居中吗?

标签 css navigation html-lists center

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

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

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

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

最佳答案

要使一行 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]-->

关于css - 你能帮我用 CSS 将 <ul> 元素居中吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/544207/

相关文章:

html - CSS:强制文本换行(或仅通过其子元素之一定义元素宽度)

html - CSS:使菜单居中

android - 抽屉导航不工作

html-lists - CSS UL/LI 菜单不居中

jquery - 小屏幕上不显示下拉菜单

html - 背景图像 : url() does not work with link contains a space

css - WordPress 主题中的文本溢出,行未正确断开

javascript - 如何不让别人点击导航器的返回按钮?

html - 使用 CSS 固定导航菜单高度

css - Bootstrap : list-inline with bullets?