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

更改此部分

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

更改后

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

Answer 2

将此样式添加到CSS：

#main_menu {
  margin: 0 auto;
}

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

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

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

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

Answer 3

集中导航的最佳方法是放置一个显示屏：＆＃34; table＆＃34;到你的主要容器。通过这种方式，您将确保所有内容都集中在一起。

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

Answer 4

在html中，试试这个

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

CSS：将菜单对齐到中心

4 个答案: