如何集中我的导航栏项目？

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

删除您的navli类上的float:left并将其设置为display:inline-block并在text-align:center上添加#nav，并将#navigation添加{{1 }}

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;
}

Answer 2

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

这是你正在寻找的吗？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;