Html 如何将菜单项放在中间？

我想把菜单项放在中间。目前，菜单项位于左侧

html:

我现在有这个：

我想要这个：

---

您的物品保留在左侧是因为您有一个

浮动：left

解决方案1：在父级（容器）中将flexbox与以下内容一起使用：
你需要
flex-wrap:wrap
因为默认情况下flexbox将其设置为
nowrap
，当您的屏幕较小时，它不会响应移动


ul#菜单{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#000000；
显示器：flex；
对齐项目：居中；
证明内容：中心；
柔性包装：包装；
}
ul#菜单li{
浮动：左；
}
菜单a{
显示：块；
颜色：白色；
文本对齐：居中；
字体系列：verdana；
字体大小：24px；
填充：30px；
文字装饰：无；
}
菜单李a：悬停{
背景色：#22222；
}
菜单a：激活{
背景色：#22222；
}





您的物品保留在左侧是因为您有一个
浮动：左侧

解决方案1：在父级（容器）中将flexbox与以下内容一起使用：
你需要
flex-wrap:wrap
因为默认情况下flexbox将其设置为
nowrap
，当您的屏幕较小时，它不会响应移动


ul#菜单{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#000000；
显示器：flex；
对齐项目：居中；
证明内容：中心；
柔性包装：包装；
}
ul#菜单li{
浮动：左；
}
菜单a{
显示：块；
颜色：白色；
文本对齐：居中；
字体系列：verdana；
字体大小：24px；
填充：30px；
文字装饰：无；
}
菜单李a：悬停{
背景色：#22222；
}
菜单a：激活{
背景色：#22222；
}






<ul id="menu">
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

ul#menu{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow:hidden;
    background-color: #000000;
}
ul#menu li {
    float: left;
}
ul#menu li a {
    display: block;
    color: white;
    text-align: center;
    font-family: verdana;
    font-size: 24px;
    padding: 30px;
    text-decoration: none;
}

ul#menu li a:hover {
    background-color: #222222;
}
ul#menu li a:active {
    background-color: #222222;
}

  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;