Html 如何在页面中居中放置菜单，而不是将其放在左侧

我已使用此工具生成菜单： 它工作得很好，除了菜单水平对齐到页面的左侧

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

我想要实现的是把整个菜单放在页面中间（水平）。

#菜单栏{
宽度：95%；
保证金：0px 0px 0px 0px；
填充：6px 6px 4px 6px；
高度：40px；
线高：100%；
背景：#FFFFFF；
边框：实心0px#FFFFFF；
位置：相对位置；
z指数：999；
}
#菜单栏里{
保证金：0px 0px 8px 0px；
填充：0px 20px 0px 4px；
浮动：左；
位置：相对位置；
列表样式：无；
}
#菜单栏a{
字体大小：正常；
字体系列：arial；
字体风格：普通；
字号：17px；
颜色：#000000；
文字装饰：无；
显示：块；
填充：6px 20px 6px 20px；
保证金：0；
边缘底部：8px；
}
#菜单栏。激活a，
#菜单栏li：悬停>a{
背景：#FFFFFF；
颜色：#FA550F；
-webkit盒阴影：0 1px 1px rgba（0,0,0,2）；
-moz盒阴影：0 1px 1px rgba（0,0,0,2）；
}
#菜单栏：之后{
内容：“.”；
显示：块；
明确：两者皆有；
可见性：隐藏；
线高：0；
身高：0；
}
#菜单栏{
显示：内联块；
}
html[xmlns]#菜单栏{
显示：块；
}
*html#菜单栏{
身高：1%；
}

您应该添加文本对齐：居中；要#菜单栏，请删除浮动：左；从#菜单栏li并添加显示：内联块

正确的代码：

#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;
}

---

应用于

菜单栏
CSS:

margin: 0 auto;

display: inline-block;

或：

另外，添加
菜单栏li
CSS：

margin: 0 auto;

display: inline-block;

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

HTML

JS Fiddle Link:
我编辑了CSS以获得结果

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

我将
#菜单栏
display属性更改为
display:block并使其内部的链接位于中心位置使用
文本对齐：居中。但这将不足以使链接中心，所以我做了以下编辑

#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块将其作为内联元素


#菜单栏{
宽度：95%；
保证金：0px 0px 0px 0px；
填充：6px 6px 4px 6px；
高度：40px；
线高：100%；
背景：#FFFFFF；
边框：实心0px#FFFFFF；
位置：相对位置；
z指数：999；
}
#菜单栏里{
保证金：0px 0px 8px 0px；
填充：0px 20px 0px 4px；
/**浮动：左**/
位置：相对位置；
列表样式：无；
显示：内联块；
}
#菜单栏a{
字体大小：正常；
字体系列：arial；
字体风格：普通；
字号：17px；
颜色：#000000；
文字装饰：无；
显示：块；
填充：6px 20px 6px 20px；
保证金：0；
边缘底部：8px；
}
#菜单栏。激活a，
#菜单栏li：悬停>a{
背景：#FFFFFF；
颜色：#FA550F；
-webkit盒阴影：0 1px 1px rgba（0,0,0,2）；
-moz盒阴影：0 1px 1px rgba（0,0,0,2）；
}
#菜单栏：之后{
内容：“.”；
显示：块；
明确：两者皆有；
可见性：隐藏；
线高：0；
身高：0；
}
#菜单栏{
/*显示：内联块*/
显示：块；
文本对齐：居中；
}
html[xmlns]#菜单栏{
显示：块；
}
*html#菜单栏{
身高：1%；
}





作为选项将文本对齐属性添加到容器：

    #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;
}

只需编辑#菜单栏样式：

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

截图：

您可以在块级父元素内水平居中放置内联元素，只需：

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

您可以通过为块级元素指定“自动”的“左侧边距”和“右侧边距”，使其居中（并且它有一个设置的宽度，否则它将是全宽的，不需要居中）。这通常是用这样的速记来完成的：

.center-me {
  margin: 0 auto;
}

我向所有这篇文章推荐
Hi Dan，欢迎来到Stack Overflow。我刚刚检查了你的小提琴，所有的东西都排在一行，但都是左对齐的。可能是您的分辨率或小提琴设置导致断线。你能再描述一下你想要达到的目标吗？“…除了菜单与页面左侧水平对齐”听起来像是您希望它以不同的方式对齐。它可以工作。非常感谢。由于某种原因，剩下的“宽度：95%；”干扰了对齐。@DanCele如果这样做有效，您应该单击灰色的
✔勾号。这样其他人就可以知道这个问题有一个有效的解决方案。
.center-me {
  margin: 0 auto;
}