CSS：将菜单对齐到中心答案

【问题标题】：CSS: Align Menu to CenterCSS：将菜单对齐到中心
【发布时间】：2019-03-23 07:06:16
【问题描述】：

我正在尝试将菜单对齐到中心。我试过放入 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;

【问题讨论】：

发布您的 HTML。作为通过查看 css 代码的假设，将 display: inline-block; margin: 0 auto; 赋予 #main_menu nav ul 类样式。

标签： css alignment center

【解决方案1】：

使您的导航居中的最佳方法是将 display: "table" 放置到您的主容器中。这样您就可以确保所有内容都居中。

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

【讨论】：

【解决方案2】：

更改此部分

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

改动后

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

【讨论】：

【解决方案3】：

将此样式添加到您的 CSS：

#main_menu {
  margin: 0 auto;
}

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

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

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

请注意，这种水平居中方法仅适用于非浮动、块显示、静态或相对定位的元素——我猜这对您的应用程序来说很好，但如果不查看您的 HTML，我们就无法知道。

【讨论】：

【解决方案4】：

在 html 中，试试这个

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

【讨论】：

center HTML 标记已弃用。