html - 如何使我的导航栏元素居中？

Question

我一直在检查与我相关的其他问题，大多数时候建议使用“text-align:center”。然而，即使我将它实现到我的代码中，导航栏仍然不居中......这是我的代码:

/* 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>

提前感谢您的任何建议!

Answer 1

删除 float:left 在你的 navli 类上并将其设置为 display:inline-block 并在你的上添加 text-align:center #nav，并在您的 #navigation 中添加 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>