Question

首先，我需要告诉你，我尝试了其他帖子，但不幸的是没有用。我有一个导航栏，我想在导航栏的中间开始“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添加到中心。

＆＃13;

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

＆＃13;

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

＆＃13;

CSS中心导航栏

2 个答案: