How can align center a horizal menu? - css

Question

I create a horizontal menu, it contains a submenu.
I have tried using some attributes as:
justify-content:center , align-items: center; and text-align: center;
Here's a snippet with the code:
/*==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>Trang chủ</li>
<li>Diễn đàn</li>
<li>Tin tức
<ul class="sub-menu">
<li>WordPress</li>
<li><a href="https://thachpham.com/category/seo" data-wpel-link="internal">SEO</a></li>
<li>Hosting</li>
</ul>
</li>
<li>Hỏi đáp</li>
<li>Liên hệ</li>
</ul>
</div>
</header>
But menu still can't align to center.
How can I center a horizontal menu?
Thanks all.

Answer 1

Add display: flex; on #menu
The properties(justify-content: center;) that you used work with display flex only. Also you wont need float then.
* {
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;
}
<header >
<div id="menu">
<ul>
<li>Trang chủ</li>
<li>Diễn đàn</li>
<li>Tin tức
<ul class="sub-menu">
<li>WordPress</li>
<li><a href="https://thachpham.com/category/seo" data-wpel-link="internal">SEO</a></li>
<li>Hosting</li>
</ul>
</li>
<li>Hỏi đáp</li>
<li>Liên hệ</li>
</ul>
</div>
</header>

Answer 2

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

Answer 3

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