Question

我希望导航栏中的按钮出现在导航栏的中央，但我似乎只能让它们显示在左侧或右侧。我该如何居中？这是我的CSS代码：

body{
 background-color:#d9dbdd;
}

#nav {
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 background-color: #333;
 top: 0;
 width: 100%;
 z-index: 999999;
 position:fixed;
}

#nav li {
 float: left;
}

#nav li a {
 display: block;
 color: white;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
}

#nav li a:hover:not(.active) {
 background-color: #111;  
}

.active {
 background-color: #007ed8;
}

Jsfiddle：https://jsfiddle.net/ctjhvz6u/

Answer 1

删除您在float: left上声明的#nav li规则，然后添加display: inline-block，然后在text-align: center上声明#nav。

在相关元素上声明float规则时，您无法对齐任何中心。如果您在包含的父元素上声明display: inline-block，那么您设置为text-align: center的任何元素都可以水平对齐。

＆＃13;

body {
  background-color: #d9dbdd;
}

#nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  top: 0;
  width: 100%;
  z-index: 999999;
  position: fixed;
  text-align: center;
}

#nav li {
  display: inline-block;
}

#nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

#nav li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #007ed8;
}

＆＃13;

<ul id="nav" class="bg-inverse navbar-inverse">
  <li><a class="active" href="#despre">Despre mine</a></li>
  <li><a href="#educatie">Educatie</a></li>
  <li><a href="#aptitudini">Aptitudini</a></li>
  <li><a href="#experienta">Experienta</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

＆＃13;

小提琴： https://jsfiddle.net/ctjhvz6u/1/

Answer 2

删除它：

#nav li {
  float: left;
}

并添加到#nav

display: flex;
align-items:center;
justify-content: center;

我建议您使用

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

确保代码在大多数浏览器上运行。

Answer 3

您可以使用 Flexbox 执行此操作：

#nav {
  display: flex; /* displays flex-items (children) inline */
  justify-content: center; /* centers them horizontally */
}

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

3 个答案: