CSS:如何将水平列表居中?显示:内联不工作 [英] CSS: How can I center a horizontal list? Display:Inline not working

问题描述

我在使用最简单的代码时遇到了很大的麻烦.我希望我的 css 水平列表居中，仅此而已.

I am having major trouble getting the simplest of codes to work. I want my css horizontal list to be centered, that's all.

此处链接:http://bit.ly/LtIBai

我有这个代码:

#megaMenu.megaMenuHorizontal ul.megaMenu {
text-align: center;
 }

#megaMenu.megaMenuHorizontal ul.megaMenu > li {
display: inline;
}

但它不会居中?

注意:窗口必须是平板电脑纵向"大小才能看到我所指的代码.大约 800 像素宽，当徽标居中且菜单落到下一行时，但在移动菜单出现之前.

NOTE: The window must be at "tablet portrait" size to see the code I'm referring to. Approximately 800px wide, when the logo is centered and the menu falls to the next line, but before the mobile menu appears.

推荐答案

他们拒绝居中的原因是因为他们也向左浮动.将 dislay: inline 改为 display: inline-block;浮动:无，它们显示在中心.

The reason they refuse to center is because they are also floated to the left. Change dislay: inline to display: inline-block; float: none and they appear centered.

其中有很多(大部分是不必要的)CSS 代码，因此您可能需要调整其他一些内容才能使其看起来正确，但是浮动是导致非-的原因至少居中.

There's a lot of (mostly unnecessary) CSS code in there so you'll probably need to tweak a few other things before it looks right, but the floating is what's causing the non-centering at least.

这篇关于CSS:如何将水平列表居中?显示:内联不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！