水平导航栏中的中心文本

Question

我希望我的文字位于导航栏的中间。我尝试了vertical-align：center或middle但是没有用。

这就是我所拥有的：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

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

li a:hover {
  background-color: #111;
}

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

Answer 1

将line-height属性设置为等于元素的height：

li a {
  height: 60px;
  line-height: 60px;
}

Answer 2

要垂直集中文本，您需要设置line-height等于元素的高度。在这种情况下，它是60px：

li a {
  height: 60px;
  line-height: 60px;
}

希望这有帮助！ ：）

Answer 3

使用Flexbox（display: flex）将文字居中。它比line-height（height可以是一个百分比）更灵活，并且具有良好的浏览器支持。请参阅caniuse.com。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  height: 60px;
}

li a:hover {
  background-color: #111;
}

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

Answer 4

.nav{
    border:1px solid #ccc;
    border-width:1px 0;
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
    background-color: #333;
}
.nav li{
    display:inline;
}
.nav a{
    display:inline-block;
    padding:10px;
    color: white;
    text-align: center;
    text-decoration: none;
    height: 22px;
}
li a:hover {
  background-color: #111;
}

<ul class="nav">
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>