Comment centrer les éléments de la liste dans la barre de navigation horizontale?

Question

J'ai créé une barre de navigation. J'essaye de centrer des éléments de liste (avec la même taille) dans ma barre de navigation. Et en même temps, il doit être réactif. J'ai d'abord cherché sur Internet pour trouver une solution. Mais je n'ai toujours pas trouvé de solution. J'ai essayé d'expérimenter avec le rembourrage. Mais je n'ai pas réussi. Quelqu'un peut-il m'aider?

.navigationbar ul { 
 
    overflow: hidden; 
 
} 
 

 
.navigationbar { 
 
    width: 100%; 
 
} 
 

 
ul { 
 
    width: 50%; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding-left: 25%; 
 
    padding-right: 25%; 
 
    overflow: hidden; 
 
    background-color: #FF5800; 
 
} 
 

 
li { 
 
    width: 10%; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    float: left; 
 
    text-align: center; 
 
} 
 

 
li a, 
 
.dropbtn { 
 
    width: 10%; 
 
    display: block; 
 
    text-align: center; 
 
    color: white; 
 
    padding: 14px 21px; 
 
    text-decoration: none; 
 
    font-family: Verdana 
 
} 
 

 
li a:hover, 
 
.dropdown:hover .dropbtn { 
 
    background-color: red; 
 
    color: white; 
 
    transition: background-color 0.8s, color 0.8s; 
 
} 
 

 
li .active { 
 
    background-color: red; 
 
    margin: 0; 
 
} 
 

 
li.dropdown { 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    width: 154px; 
 
    z-index: 1; 
 
} 
 

 
.dropdown-content a { 
 
    color: black; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
.dropdown-content a:hover { 
 
    background-color: red; 
 
} 
 

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

<header class="header"> 
 
    <div class="logo2"> 
 
    <img class="logo" src="afbeeldingen/rijnijssel-logo.jpg"> 
 
    </div> 
 
    <div class="navigationbar"> 
 
    <ul> 
 
     <li><a class="active" href="page1.html">page1</a></li> 
 
     <li class="dropdown"> 
 
     <a href="#" class="dropbtn">dropdown</a> 
 
     <div class="dropdown-content"> 
 
      <a href="page2.html">page2</a> 
 
      <a href="page3.html">page3</a> 
 
      <a href="page4.html">page4</a> 
 
      <a href="page5.html">page5</a> 
 
      <a href="page6.html">page6</a> 
 
     </div> 
 
     </li> 
 
     <li><a href="page7.html">page7</a></li> 
 
     <li><a href="page8.html">page8</a></li> 
 
     <li><a href="page9.html">page9</a></li> 
 
     <li><a href="page10.html">page10</a></li> 
 
    </ul> 
 
    </div> 
 
</header>

Answer 1

https://jsfiddle.net/vrokv6kg/4/

<header class="header"> 
    <div class="logo2"> 
     <img class="logo" src="afbeeldingen/rijnijssel-logo.jpg"> 
    </div> 
    <div class="navigationbar"> 
     <ul> 
      <li><a class="active" href="page1.html">page1</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropbtn">dropdown</a> 
       <div class="dropdown-content"> 
        <a href="page2.html">page2</a> 
        <a href="page3.html">page3</a> 
        <a href="page4.html">page4</a> 
        <a href="page5.html">page5</a> 
        <a href="page6.html">page6</a> 
       </div> 
      </li> 
      <li><a href="page7.html">page7</a></li> 
      <li><a href="page8.html">page8</a></li> 
      <li><a href="page9.html">page9</a></li> 
      <li><a href="page10.html">page10</a></li> 
     </ul> 
    </div> 
</header> 

<style> 
.navigationbar ul { 
    overflow: hidden; 
} 

.navigationbar { 
    width: 100%; 
} 

ul { 
    list-style-type: none; 
    margin: 0; 
    overflow: hidden; 
    background-color: #FF5800; 
} 

li { 
    margin-right: auto; 
    margin-left: auto; 
    text-align: center; 
} 

li a, .dropbtn { 
    display: block; 
    text-align: center; 
    color: white; 
    padding: 14px 21px; 
    text-decoration: none; 
    font-family: Verdana 
} 

li a:hover, .dropdown:hover .dropbtn { 
    background-color: red; 
    color: white; 
    transition: background-color 0.8s, color 0.8s; 
} 

li .active{ 
    background-color: red; 
    margin: 0; 
} 

li.dropdown { 
    display: inline-block; 
} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    z-index: 1; 
} 

.dropdown-content a { 
    color: black; 
    text-decoration: none; 
    display: block; 
} 

.dropdown-content a:hover { 
    background-color: red; 
} 

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

ul { text-align: center; } 
li { display: inline-block; margin: 0 auto; } 
</style> 

Answer 2

Essayez d'utiliser FlexBox au lieu de float:

.navigationbar { 
width: 100%; 
background-color: #FF5800; 
margin: 0; 
padding: 0; 
} 

ul { 
width: 50%; 
list-style-type: none; 
margin: 0 auto; 
padding: 0 25%; 
display: flex; 
} 

li { 
margin: 0 auto; 
text-align: center; 
padding: 0; 
justify-content: center; 
} 

li a, .dropbtn { 
width: 10%; 
display: block; 
text-align: center; 
color: white; 
padding: 14px 21px; 
text-decoration: none; 
font-family: Verdana 
} 

li a:hover, .dropdown:hover .dropbtn { 
background-color: red; 
color: white; 
transition: background-color 0.8s, color 0.8s; 
} 

li .active{ 
background-color: red; 
margin: 0; 
} 

li.dropdown { 
display: inline-block; 
} 

.dropdown-content { 
display: none; 
position: absolute; 
background-color: #f9f9f9; 
width: 154px; 
z-index: 1; 
} 

.dropdown-content a { 
color: black; 
text-decoration: none; 
display: block; 
} 

.dropdown-content a:hover { 
background-color: red; 
} 

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