html - 水平导航栏 : How to center text and set colours

Question

我正在尝试创建具有以下属性的水平导航栏:

1. anchor 文本在列表中水平和垂直居中 元素。
2. 整个列表项是一个可点击的链接。
3. 悬停时，列表项的背景颜色和 anchor 文本的颜色会交换。

这是一个fiddle设法只完成#2。我为 #1 找到的解决方案似乎都不起作用。 #3 逃脱了我。

不胜感激。

这是工作代码:

#navbar ul {
  list-style-type: none;
  display: table;
}
    
#navbar li {
  display: table-cell;
  float: left;
  width: 200px;
  height: 50px;
  text-align: center;
  background-color: #f0e68c;
}
    
#navbar li:hover {
  background-color: black;
}
    
#navbar li a {
  display: block;
  text-decoration: none;
  color: black;
}

<div id="navbar">
  <ul>
    <li><a href="#intro">Intro</a></li>
    <li><a href="#bio">Bio</a></li>
    <li><a href="#issues">Issues</a></li>
  </ul>
</div>

Answer 1

您可以使用此 CSS。检查此链接 https://jsfiddle.net/oynd1sq6/

#navbar li:hover a{
color:#ffffff;
}