Digital Digital - 5 months ago 11
HTML Question

How to center my navbar items?

I have been checking on other questions related to mine, and most of the time "text-align:center" is suggested. However, even if I implement it to my code, the navbar still doesn't center... Here's my code:



/* NAVIGATION BAR */

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

#nav {
width: auto;
}

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

.navli {
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);
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 {
display:block;
}

.active {
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>
<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>





Thanks for any suggestions in advance!

Answer

remove float:left on your navli class ang set it to display:inline-block and add text-align:center on your #nav, and to center your #navigation add margin:0 auto;

/* NAVIGATION BAR */

#navigation {
	width:1300px;
	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 {
	/* 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);
	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 {
	display:block;
}

.active {
	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>
	  <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>

Comments