在水平导航栏中将文本居中

Question

我想在导航栏的中间输入文字。 我尝试了vertical-align：居中或居中，但这没有用。

这是我所拥有的：

 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>