Wie zentriere ich meine Navigationselemente?

Question

Ich habe nach anderen Fragen zu meinem gesucht, und meistens wird "text-align: center" vorgeschlagen. Aber selbst wenn ich es meinen Code implementieren, die navbar noch nicht ... nicht zentriert Hier ist mein Code:

/* NAVIGATION BAR */ 
 

 
#navigation { 
 
\t width:1300px; 
 
\t height:auto; 
 
} 
 

 
#nav { 
 
    width: auto; 
 
} 
 

 
.ulnav { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
.navli { 
 
\t float:left; 
 
} 
 

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

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

 
.navli.dropdown { 
 
    display: inline-block; 
 
} 
 

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

 
.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 { 
 
\t display:block; 
 
} 
 

 
.active { 
 
\t background-color:green; 
 
}

<div id="navigation"> 
 
<div id="nav"> 
 
<ul class="ulnav"> 
 
    <li class="navli"><a class="active" href="#home">Home</a></li> 
 
    <li class="navli"><a href="#news">Link</a></li> 
 
    <li class="dropdown navli"> 
 
    <a href="#" class="dropbtn">Dropdown</a> 
 
    <div class="dropdown-content"> 
 
     <a href="#">Droplink 1</a> 
 
     <a href="#">Droplink 2</a> 
 
    </div> 
 
    </li> 
 
    <li class="dropdown navli"> 
 
    <a href="#" class="dropbtn">Dropdown 2</a> 
 
    <div class="dropdown-content"> 
 
     <a href="#">Droplink 2.1</a> 
 
     <a href="#">Droplink 2.2</a> 
 
     <a href="#">Droplink 2.3</a> 
 
    </div> 
 
    </li> 
 
    <li class="dropdown navli"> 
 
    <a href="#" class="dropbtn">Dropdown 3</a> 
 
    <div class="dropdown-content"> 
 
     <a href="#">Droplink3.1</a> 
 
\t <a href="#">Droplink3.2</a> 
 
     <a href="#">Droplink3.3</a> 
 
    </div> 
 
    </li> 
 
    <li class="navli"><a href="#news">Link 2</a></li> 
 
</ul> 
 
</div> 
 
</div>

Vielen Dank für alle Vorschläge im Voraus!

Answer 1

entfernen float:left auf navli Klasse ANG setzen Sie ihn auf display:inline-block und fügen text-align:center auf Ihrem #nav und Ihre #navigation hinzufügen margin:0 auto;

/* NAVIGATION BAR */ 
 

 
#navigation { 
 
\t width:1300px; 
 
\t height:auto; 
 
    margin : 0 auto; 
 
} 
 

 
#nav { 
 
    width: auto; 
 
    text-align : center; 
 
} 
 

 
.ulnav { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
.navli { 
 
\t /* float:left;*/ 
 
    display : inline-block; 
 
} 
 

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

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

 
.navli.dropdown { 
 
    display: inline-block; 
 
} 
 

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

 
.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 { 
 
\t display:block; 
 
} 
 

 
.active { 
 
\t background-color:green; 
 
}

<div id="navigation"> 
 
<div id="nav"> 
 
<ul class="ulnav"> 
 
    <li class="navli"><a class="active" href="#home">Home</a></li> 
 
    <li class="navli"><a href="#news">Link</a></li> 
 
    <li class="dropdown navli"> 
 
    <a href="#" class="dropbtn">Dropdown</a> 
 
    <div class="dropdown-content"> 
 
     <a href="#">Droplink 1</a> 
 
     <a href="#">Droplink 2</a> 
 
    </div> 
 
    </li> 
 
    <li class="dropdown navli"> 
 
    <a href="#" class="dropbtn">Dropdown 2</a> 
 
    <div class="dropdown-content"> 
 
     <a href="#">Droplink 2.1</a> 
 
     <a href="#">Droplink 2.2</a> 
 
     <a href="#">Droplink 2.3</a> 
 
    </div> 
 
    </li> 
 
    <li class="dropdown navli"> 
 
    <a href="#" class="dropbtn">Dropdown 3</a> 
 
    <div class="dropdown-content"> 
 
     <a href="#">Droplink3.1</a> 
 
\t <a href="#">Droplink3.2</a> 
 
     <a href="#">Droplink3.3</a> 
 
    </div> 
 
    </li> 
 
    <li class="navli"><a href="#news">Link 2</a></li> 
 
</ul> 
 
</div> 
 
</div>

Answer 2

Sie haben float:left auf dem li verwendet zum Zentrum , die sie nach links ausrichtet. Ich habe es entfernt und hinzugefügt text-align:center auf die ul

Ist das, was Sie suchen?

/* NAVIGATION BAR */ 
 

 
#navigation { 
 
\t width:1300px; 
 
\t height:auto; 
 
} 
 

 
#nav { 
 
    width: auto; 
 
} 
 

 
.ulnav { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    text-align:center; 
 
} 
 

 
.navli { 
 
\t display:inline-block; 
 
} 
 

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

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

 
.navli.dropdown { 
 
    display: inline-block; 
 
} 
 

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

 
.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 { 
 
\t display:block; 
 
} 
 

 
.active { 
 
\t background-color:green; 
 
}

<div id="navigation"> 
 
<div id="nav"> 
 
<ul class="ulnav"> 
 
    <li class="navli"><a class="active" href="#home">Home</a></li> 
 
    <li class="navli"><a href="#news">Link</a></li> 
 
    <li class="dropdown navli"> 
 
    <a href="#" class="dropbtn">Dropdown</a> 
 
    <div class="dropdown-content"> 
 
     <a href="#">Droplink 1</a> 
 
     <a href="#">Droplink 2</a> 
 
    </div> 
 
    </li> 
 
    <li class="dropdown navli"> 
 
    <a href="#" class="dropbtn">Dropdown 2</a> 
 
    <div class="dropdown-content"> 
 
     <a href="#">Droplink 2.1</a> 
 
     <a href="#">Droplink 2.2</a> 
 
     <a href="#">Droplink 2.3</a> 
 
    </div> 
 
    </li> 
 
    <li class="dropdown navli"> 
 
    <a href="#" class="dropbtn">Dropdown 3</a> 
 
    <div class="dropdown-content"> 
 
     <a href="#">Droplink3.1</a> 
 
\t <a href="#">Droplink3.2</a> 
 
     <a href="#">Droplink3.3</a> 
 
    </div> 
 
    </li> 
 
    <li class="navli"><a href="#news">Link 2</a></li> 
 
</ul> 
 
</div> 
 
</div>