HTML/CSS: Как переместить мою навигационную панель в середину?

Question

Я новичок в CSS, и я создаю навигационную панель. В настоящее время моя панель навигации расположена слева, и я хотел бы переместить весь стержень в середину. Как я могу это сделать?

Ниже приведены коды. Заранее спасибо!

/* Navigation bar */ 
 
#navigation_bar { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    position: fixed; 
 
    background-color: #333; 
 
    top: 0; 
 
    Left: 0; 
 
    width: 100%; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a, .dropbtn { 
 
    display: inline-block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover:not(.active), .dropdown:hover .dropbtn { 
 
    background-color: #111; 
 
} 
 

 
li.dropdown { 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f1f1f1; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
} 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
.dropdown-content a:hover { 
 
    background-color: #f1f1f1 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 

 
.active { 
 
    background-color: #4CAF50; 
 
}

<!--Navigation bar--> 
 
     <ul id="navigation_bar"> 
 
      <li><a class="active" href="navigation_bar/home.html">Home.</a></li> 
 
      <li><a href="navigation_bar/promotion.html">Promotion.</a></li> 
 
<!--drop down menu--> 
 
      <li class="dropdown"><a href="navigation_bar/hot_products.html" class="dropbtn">Hot Products.</a> 
 
       <div class="dropdown-content"> 
 
        <a herf="navigation_bar/sub_menu/sandwiches.html">Sandwiches</a> 
 
        <a herf="navigation_bar/sub_menu/burger.html">Burger</a> 
 
        <a herf="navigation_bar/sub_menu/rice.html">Rice</a> 
 
        <a herf="navigation_bar/sub_menu/noodles.html">Noddles</a> 
 
       </div> 
 
      </li> 
 
<!--Back to normal--> 
 
      <li><a href="navigation_bar/cold_products.html">Cold Products.</a></li> 
 
      <li><a href="navigation_bar/snacks.html">Snacks.</a></li> 
 
      <li><a href="navigation_bar/about_us.html">About Us.</a></li> 
 
      <li><a href="navigation_bar/contact_us.html">Contact Us.</a></li> 
 
     </ul>

Answer 1

Обновите свою #navigation_bar с

#navigation_bar { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 0; 
} 

Здесь рабочий Demo

#navigation_bar { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    position: fixed; 
 
    background-color: #333; 
 
    top: 0; 
 
    Left: 0; 
 
    width: 100%; 
 
\t \t display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    padding: 0; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a, .dropbtn { 
 
    display: inline-block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover:not(.active), .dropdown:hover .dropbtn { 
 
    background-color: #111; 
 
} 
 

 
li.dropdown { 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f1f1f1; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
} 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
.dropdown-content a:hover { 
 
    background-color: #f1f1f1 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 

 
.active { 
 
    background-color: #4CAF50; 
 
}

 <ul id="navigation_bar"> 
 
      <li><a class="active" href="navigation_bar/home.html">Home.</a></li> 
 
      <li><a href="navigation_bar/promotion.html">Promotion.</a></li> 
 
<!--drop down menu--> 
 
      <li class="dropdown"><a href="navigation_bar/hot_products.html" class="dropbtn">Hot Products.</a> 
 
       <div class="dropdown-content"> 
 
        <a herf="navigation_bar/sub_menu/sandwiches.html">Sandwiches</a> 
 
        <a herf="navigation_bar/sub_menu/burger.html">Burger</a> 
 
        <a herf="navigation_bar/sub_menu/rice.html">Rice</a> 
 
        <a herf="navigation_bar/sub_menu/noodles.html">Noddles</a> 
 
       </div> 
 
      </li> 
 
<!--Back to normal--> 
 
      <li><a href="navigation_bar/cold_products.html">Cold Products.</a></li> 
 
      <li><a href="navigation_bar/snacks.html">Snacks.</a></li> 
 
      <li><a href="navigation_bar/about_us.html">About Us.</a></li> 
 
      <li><a href="navigation_bar/contact_us.html">Contact Us.</a></li> 
 
     </ul>

Answer 2

Изменяя немного вашего CSS кода вы можете легко сделать, как:

#navigation_bar { 
    text-align: center; 
} 

#navigation_bar li { 
    float: none; 
    display: inline-block; 
    vertical-align: top; 
} 
li .dropdown-content a:hover:not(.active) { 
    background: #d0d0d0; /* for altering the hover effect on submenus */ 
} 

Я также создал JSFiddle.

Answer 3

Изменить navigation_bar CSS к:

#navigation_bar { 
list-style-type: none; 
margin: 0 auto; 
position: fixed; 
background-color: #333; 
top: 0; 
width: auto;  
display: block; 
float: left; 
} 

Answer 4

Попробуйте

#navigation_bar{ text-align: center;} /*add align center */ 
li {display: inline; /* float:left; */} /* remove float left here and add display inline */