CSS：将菜单对齐到中心

Question

我试图将菜单对齐到中心。我尝试过放入text-align：center！important;在各个地方，但它没有做任何事情。

有人有主意吗？

在此先感谢您的帮助！

.menu_wrapper
width: 88%;
margin: 0 auto;



#main_menu nav ul
position: relative;
padding-left: 2%;
border-top: 1px solid #fff;
border-bottom: 1px solid #FFF;

#main_menu nav ul:after
content: "\0020"; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;

#main_menu nav ul#nav_menu li
cursor: pointer;
display: block;
float: left;
margin-right: 19px;


#main_menu nav ul#nav_menu li a
display: block;
padding: 20px 10px 15px;
font: 11px/1.27em "Helvetica Neue", Helvetica, Arial, sans-serif;
letter-spacing: 0.25em;
color: #fff;
z-index: 2;

#main_menu nav ul#nav_menu li.blob
border-bottom: 1px solid #F00;
bottom: -1px;
height: 1px;
padding-bottom: 0;
position: absolute;
z-index: 1;

Answer 1

集中导航的最佳方法是在主容器中放置一个显示：“table”。这样您就可以确保所有内容都集中在一起。

.menu_wrapper {
  display: table;
  margin: 0 auto;
}

Answer 2

改变这一节

.menu_wrapper
{
width: 88%;
margin: 0 auto;
}

改变之后

.menu_wrapper
{
width: 88%;
margin: 0 auto;
max-width:88%;
}

Answer 3

将此样式添加到CSS：

#main_menu {
  margin: 0 auto;
}

或者（如果您有保留的上边距或下边距）：

#main_menu {
  margin-right: auto;
  margin-left: auto;
}

第一个例子是将垂直边距设置为零和水平（left和right）边距为自动的简写。垂直并不重要，但水平边距的auto设置会将元素从其包含元素（或您的文档，取决于您的HTML）的左侧和右侧均匀地推开，从而使其居中。

请注意，这种水平居中方法仅适用于非浮动，块显示，静态或相对定位的元素 - 我猜你的应用程序很好，但我们无法看到你的HTML。

Answer 4

在HTML中，试试这个

<center><div class='menu_wrapper'> your content </div></center>