CSS 中的居中导航栏

Question

首先我要告诉你，我尝试了其他帖子，但不幸的是 none 有效。我有一个导航栏，我想让 "HOME" 按钮从导航栏的中间开始，基本上是居中的 4 个按钮。感谢帮助。所有 HTML 和 CSS 在这里：jsfiddle.net/bqcuu3dk/

Answer 1

使用这个更新的CSS：

#navbar {
  overflow: hidden;
  text-align:center;
  background-color: #333;
}

#navbar a {
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  font: normal 15px Verdana, sans-serif;
  text-decoration: none;
  transition: all 0.8s ease 0s;
}

#navbar a:hover {
  background-color: #595959;
  color: #d1d1d1;
}

#navbar a.active {
  background-color: #4CAF50;
  color: white;
}

#navbar a.active:hover {
  background-color: #4CAF50;
  color: white;
  opacity: 0.65;
}

Answer 2

将 height 和 line-height 添加到您的导航栏，并将 text-align 添加到中心。

#navbar {
  height: 43px;
  line-height: 43px;
  overflow: hidden;
  text-align: center;
  background-color: #333;
}

#navbar a {
  color: #f2f2f2;
  padding: 14px 16px;
  font: normal 15px Verdana, sans-serif;
  text-decoration: none;
  transition: all 0.8s ease 0s;
}

#navbar a:hover {
  background-color: #595959;
  color: #d1d1d1;
}

#navbar a.active {
  background-color: #4CAF50;
  color: white;
}

#navbar a.active:hover {
  background-color: #4CAF50;
  color: white;
  opacity: 0.65;
}

<div id="navbar">
  <a class="active" href="#index">Home</a>
  <a href="#nav1">Nav1</a>
  <a href="#nav2">Nav2</a>
  <a href="#nav3">Nav3</a>
</div>

CSS 中的居中导航栏

Centering navigation bar in CSS

html

css

center

navigationbar

web