seo Question posted in
Some basic information to get you started with this can be found here.

How can align center a horizal menu? – SEO

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><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>

But menu still can’t align to center.

How can I center a horizontal menu?

Thanks all.

Tags:

3

Answers


  1. 0

    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><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>
    Login or Signup to reply.
  2. 0

    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><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>
    Login or Signup to reply.
  3. 0

    Add display flex to #menu

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

}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search