如何使我的导航栏项目居中？

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 并将其设置为display:inline-block 并在您的#nav 上添加text-align:center，并将您的#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>

Answer 2

您在li 上使用了float:left，这会将它们向左对齐。我已将其删除并将text-align:center 添加到ul

这就是你要找的吗？

/* NAVIGATION BAR */

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

#nav {
    width: auto;
}

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

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