如何将中心对齐一个水平菜单？

Question

我创建了一个水平菜单，它包含一个子菜单。

我尝试过使用一些属性：
justify-content:center，align-items: center;和text-align: center;

以下是代码片段：

/*==Reset CSS==*/
* {
  margin: 0;
  padding: 0;
}
#menu {

    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;

} 
/*==Style cho menu===*/
#menu ul { 
  list-style-type: none;
  text-align: center; 
}
#menu li {
    display: inline-block;
    float: left;
    padding: 10px;
    position: relative;
}
#menu a {
  color: #4C9CF1;
  text-decoration: none;
  font-weight: bold;
  display: block;
  font-size:16px;
}
#menu a:hover {
   color: #444;
}

header {
    background: #fff;
    width: 100%;
    height: 85px;
    position: fixed;
    top: 0;
    left: 0;
    border-bottom: 1px solid #4C9CF1;
    z-index: 100;
}
/*==Dropdown Menu==*/
.sub-menu {
 display: none;
 position: absolute;
}
.sub-menu li {
  display: none;
  margin-left: 0 !important;  
}
#menu li:hover .sub-menu {
 display: block;
}

<header >
        <div id="menu">
           <ul>
            <li><a href="#">Trang chủ</a></li>
            <li><a href="#">Diễn đàn</a></li>
            <li><a href="#">Tin tức</a>
              <ul class="sub-menu">
                <li><a href="#">WordPress</a></li>
                <li><a href="#"><a href="https://thachpham.com/category/seo" data-wpel-link="internal">SEO</a></a></li>
                <li><a href="#">Hosting</a></li>
              </ul>
            </li>
            <li><a href="#">Hỏi đáp</a></li>
            <li><a href="#">Liên hệ</a></li>
          </ul>
    </div>
    </header>

但是菜单仍然无法与中心对齐。

如何将水平菜单居中？

谢谢大家。

Answer 1

在display: flex;上添加#menu 您使用的属性（justify-content: center;）仅适用于display flex。你也不需要漂浮。

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
}
#menu {
display: flex;
justify-content: center;
padding: 20px;

} 
/*==Style cho menu===*/
#menu ul { 
  list-style-type: none;
  text-align: center; 
}
#menu li {
display: inline-block;
padding: 10px;
position: relative;
}
#menu a {
  color: #4C9CF1;
  text-decoration: none;
  font-weight: bold;
  display: block;
  font-size:16px;
}
#menu a:hover {
   color: #444;
}

header {
background: #fff;
width: 100%;
height: 85px;
position: fixed;
top: 0;
left: 0;
border-bottom: 1px solid #4C9CF1;
z-index: 100;
}
/*==Dropdown Menu==*/
.sub-menu {
 display: none;
 position: absolute;
}
.sub-menu li {
  display: none;
  margin-left: 0 !important;  
}
#menu li:hover .sub-menu {
 display: block;
}

＆＃13;

<header >
<div id="menu">
   <ul>
    <li><a href="#">Trang chủ</a></li>
    <li><a href="#">Diễn đàn</a></li>
    <li><a href="#">Tin tức</a>
      <ul class="sub-menu">
        <li><a href="#">WordPress</a></li>
        <li><a href="#"><a href="https://thachpham.com/category/seo" data-wpel-link="internal">SEO</a></a></li>
        <li><a href="#">Hosting</a></li>
      </ul>
    </li>
    <li><a href="#">Hỏi đáp</a></li>
    <li><a href="#">Liên hệ</a></li>
  </ul>
</div>
</header>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将display flex添加到#menu

#menu {
     display:flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;

}

Answer 3

只需从float:left

中删除#menu li即可

＆＃13;

＆＃13;

/*==Reset CSS==*/
* {
  margin: 0;
  padding: 0;
}
#menu {

    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;

} 
/*==Style cho menu===*/
#menu ul { 
  list-style-type: none;
  text-align: center; 
}
#menu li {
    display: inline-block;
    padding: 10px;
    position: relative;
}
#menu a {
  color: #4C9CF1;
  text-decoration: none;
  font-weight: bold;
  display: block;
  font-size:16px;
}
#menu a:hover {
   color: #444;
}

header {
    background: #fff;
    width: 100%;
    height: 85px;
    position: fixed;
    top: 0;
    left: 0;
    border-bottom: 1px solid #4C9CF1;
    z-index: 100;
}
/*==Dropdown Menu==*/
.sub-menu {
 display: none;
 position: absolute;
}
.sub-menu li {
  display: none;
  margin-left: 0 !important;  
}
#menu li:hover .sub-menu {
 display: block;
}

＆＃13;

<header >
    <div id="menu">
       <ul>
        <li><a href="#">Trang chủ</a></li>
        <li><a href="#">Diễn đàn</a></li>
        <li><a href="#">Tin tức</a>
          <ul class="sub-menu">
            <li><a href="#">WordPress</a></li>
            <li><a href="#"><a href="https://thachpham.com/category/seo" data-wpel-link="internal">SEO</a></a></li>
            <li><a href="#">Hosting</a></li>
          </ul>
        </li>
        <li><a href="#">Hỏi đáp</a></li>
        <li><a href="#">Liên hệ</a></li>
      </ul>
</div>
</header>

＆＃13;

＆＃13;

＆＃13;