如何使菜单在页面内居中而不是在左侧

Question

我使用这个工具来生成菜单：https://www.cssportal.com/css3-menu-generator/，它工作得很好，除了菜单水平对齐在页面的左边。

我尝试在div中包装内容，并使用文本对齐。我尝试使用left和margin left，但最后一个菜单项转到了下一行。

我想要实现的是让整个菜单位于页面的中间(水平)。

link text

​

#menu-bar {
  width: 95%;
  margin: 0px 0px 0px 0px;
  padding: 6px 6px 4px 6px;
  height: 40px;
  line-height: 100%;
  background: #FFFFFF;
  border: solid 0px #FFFFFF;
  position: relative;
  z-index: 999;
}

#menu-bar li {
  margin: 0px 0px 8px 0px;
  padding: 0px 20px 0px 4px;
  float: left;
  position: relative;
  list-style: none;
}

#menu-bar a {
  font-weight: normal;
  font-family: arial;
  font-style: normal;
  font-size: 17px;
  color: #000000;
  text-decoration: none;
  display: block;
  padding: 6px 20px 6px 20px;
  margin: 0;
  margin-bottom: 8px;
}

#menu-bar .active a,
#menu-bar li:hover>a {
  background: #FFFFFF;
  color: #FA550F;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}

#menu-bar:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

#menu-bar {
  display: inline-block;
}

html[xmlns] #menu-bar {
  display: block;
}

* html #menu-bar {
  height: 1%;
}

<ul id="menu-bar">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">About</a></li>
</ul>

​

Answer 1

我编辑了CSS以实现效果。

#menu-bar {
  /* display: inline-block;*/
  display: block;
  text-align: center;
}

我将#menu-bar显示属性更改为display: block;，并使用text-align: center;在其中创建链接。但这将不足以使链接中心，所以我做了以下编辑。

#menu-bar li {
  margin: 0px 0px 8px 0px;
  padding: 0px 20px 0px 4px;
  /**float: left;**/
  position: relative;
  list-style: none;
  display: inline-block;
}

float:left实际上强制链接项向左，所以我省略了它，并用display: inline-block;使它成为一个内联元素。

​

#menu-bar {
  width: 95%;
  margin: 0px 0px 0px 0px;
  padding: 6px 6px 4px 6px;
  height: 40px;
  line-height: 100%;
  background: #FFFFFF;
  border: solid 0px #FFFFFF;
  position: relative;
  z-index: 999;
}

#menu-bar li {
  margin: 0px 0px 8px 0px;
  padding: 0px 20px 0px 4px;
  /**float: left;**/
  position: relative;
  list-style: none;
  display: inline-block;
}

#menu-bar a {
  font-weight: normal;
  font-family: arial;
  font-style: normal;
  font-size: 17px;
  color: #000000;
  text-decoration: none;
  display: block;
  padding: 6px 20px 6px 20px;
  margin: 0;
  margin-bottom: 8px;
}

#menu-bar .active a,
#menu-bar li:hover>a {
  background: #FFFFFF;
  color: #FA550F;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}

#menu-bar:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

#menu-bar {
  /*display: inline-block;*/
  display: block;
  text-align: center;
}

html[xmlns] #menu-bar {
  display: block;
}

* html #menu-bar {
  height: 1%;
}

<ul id="menu-bar">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">About</a></li>
</ul>

​

Answer 2

你应该添加text-align: center；到#菜单栏，从#menu-bar li中删除float: left；并添加display: inline-block；

正确的代码：

#menu-bar {
  width: 95%;
  margin: 0px 0px 0px 0px;
  padding: 6px 6px 4px 6px;
  height: 40px;
  line-height: 100%;
  background: #FFFFFF;
  border: solid 0px #FFFFFF;
  position: relative;
  z-index: 999;
  text-align: center;
}

#menu-bar li {
  margin: 0px 0px 8px 0px;
  padding: 0px 20px 0px 4px;
  position: relative;
  list-style: none;
  display: inline-block;
}

Answer 3

适用于menu-bar CSS：

margin: 0 auto;

或者：

left: 50%;

另外，添加menu-bar li CSS：

display: inline-block;