Comment centrer mon menu?

Question

Comment puis-je centrer les mots de ma barre de navigation? Je veux que le Home, News et Dropdown soient centrés.

/* Navbar container */ 
 

 
.navbar { 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    font-family: Arial; 
 
} 
 

 

 
/* Links inside the navbar */ 
 

 
.navbar a { 
 
    float: left; 
 
    font-size: 16px; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 

 
/* The dropdown container */ 
 

 
.dropdown { 
 
    float: left; 
 
    overflow: hidden; 
 
} 
 

 

 
/* Dropdown button */ 
 

 
.dropdown .dropbtn { 
 
    font-size: 16px; 
 
    border: none; 
 
    outline: none; 
 
    color: white; 
 
    padding: 14px 16px; 
 
    background-color: inherit; 
 
} 
 

 

 
/* Add a red background color to navbar links on hover */ 
 

 
.navbar a:hover, 
 
.dropdown:hover .dropbtn { 
 
    background-color: red; 
 
} 
 

 

 
/* Dropdown content (hidden by default) */ 
 

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

 

 
/* Links inside the dropdown */ 
 

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

 

 
/* Add a grey background color to dropdown links on hover */ 
 

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

 

 
/* Show the dropdown menu on hover */ 
 

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 

 
<h1>Simple Pure CSS Drop Down Menu</h1> 
 
<div class="navbar"> 
 
    <a href="#home">Home</a> 
 
    <a href="#news">News</a> 
 
    <div class="dropdown"> 
 
    <button class="dropbtn">Dropdown 
 
      <i class="fa fa-caret-down"></i> 
 
     </button> 
 
    <div class="dropdown-content"> 
 
     <a href="#">Link 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Vous pouvez ajouter ce qui suit à .navbar:

display: flex; 
justify-content: center; 

Answer 2

Vous pouvez utiliser flexbox comme mentionné dans une autre réponse. Une autre option consiste à supprimer les propriétés float sur les éléments de la barre de navigation et à ajouter display: inline-block. centre Ensuite, tout en ajoutant text-align: center au navbar

/* Navbar container */ 
 

 
.navbar { 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    font-family: Arial; 
 
    text-align: center; 
 
} 
 

 

 
/* Links inside the navbar */ 
 

 
.navbar a { 
 
    display: inline-block; 
 
    font-size: 16px; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 

 
/* The dropdown container */ 
 

 
.dropdown { 
 
    display: inline-block; 
 
} 
 

 

 
/* Dropdown button */ 
 

 
.dropdown .dropbtn { 
 
    font-size: 16px; 
 
    border: none; 
 
    outline: none; 
 
    color: white; 
 
    padding: 14px 16px; 
 
    background-color: inherit; 
 
} 
 

 

 
/* Add a red background color to navbar links on hover */ 
 

 
.navbar a:hover, 
 
.dropdown:hover .dropbtn { 
 
    background-color: red; 
 
} 
 

 

 
/* Dropdown content (hidden by default) */ 
 

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

 

 
/* Links inside the dropdown */ 
 

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

 

 
/* Add a grey background color to dropdown links on hover */ 
 

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

 

 
/* Show the dropdown menu on hover */ 
 

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 

 
<h1>Simple Pure CSS Drop Down Menu</h1> 
 
<div class="navbar"> 
 
    <a href="#home">Home</a> 
 
    <a href="#news">News</a> 
 
    <div class="dropdown"> 
 
    <button class="dropbtn">Dropdown 
 
     <i class="fa fa-caret-down"></i> 
 
    </button> 
 
    <div class="dropdown-content"> 
 
     <a href="#">Link 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
    </div> 
 
    </div> 
 
</div>