如何将菜单置于页面中心而不是使其位于左侧

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，删除float：left;从＃menu-bar li并添加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;

Answer 4

尝试使用diplay: flex轻松完成对齐。这是示例代码

HTML

<div class="flex">
<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>
</div>

CSS

#menu-bar {
  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%;
}

.flex {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

JS小提琴链接：https://jsfiddle.net/SJ_KIllshot/6z483d7n/

Answer 5

作为选项，将text-align属性添加到容器：

    #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;
    list-style: none;
    display: inline-block;
}

Answer 6

只需修改＃menu-bar样式：

#menu-bar {
display: flex;
justify-content: center;
align-items: center
}

屏幕截图：

Answer 7

您可以使用以下命令在块级父元素内将行内元素水平居中：

.center-children {
  text-align: center;
}

您可以通过为块级元素设置auto的margin-left和margin-right来居中（并且它具有设置的宽度，否则它将是全宽度，不需要居中）。通常是用这样的速记来完成的：

.center-me {
  margin: 0 auto;
}

我建议所有https://css-tricks.com/centering-css-complete-guide/文章