如何用CSS实现导航菜单锚点标签内文字垂直居中？

嘿，我看你在折腾导航菜单里<a>标签文字垂直居中的问题，试了height、top还有display:block都没搞定对吧？别着急，咱们来捋捋问题出在哪，然后给你几个靠谱的解决方案。

先说说你现有代码里的小问题：你给<a>加了height:35px和top:20px，但top属性只有在元素设置了position: relative/absolute/fixed的时候才会生效；而且你还设置了padding:14px 16px，这时候height和上下padding会叠加，让元素实际高度变成35 + 14*2 = 63px，反而把文字挤得位置不对，这就是之前的方法没奏效的原因。

下面给你三种实用的解决办法，按需选就行：

方法一：Flex布局（最推荐，适配性拉满） #

Flex是现在做垂直居中最省心的方案，不管文字是单行还是多行都能完美适配。修改你的<a>标签CSS：

.mainav li a {
  display: flex;
  align-items: center; /* 核心：实现垂直居中 */
  justify-content: center; /* 可选：保证文字水平居中 */
  color: black;
  padding: 0 16px; /* 去掉上下padding，用flex控制垂直位置 */
  height: 35px; /* 固定导航项高度 */
  text-decoration: none;
}

原理很简单：把<a>变成flex容器后，align-items:center会让容器内的元素（这里就是导航文字）自动垂直居中，不管你后续调整导航高度，文字位置都不会乱。

方法二：Line-height（适合单行文字场景） #

如果你的导航文字都是单行的，用line-height和height相等的方式也很简单，代码量极少：

.mainav li a {
  display: block;
  color: black;
  text-align: center;
  padding: 0 16px;
  height: 35px;
  line-height: 35px; /* line-height等于height，单行文字自动垂直居中 */
  text-decoration: none;
}

这种方法适合简单的单行导航，缺点是如果文字换行就会失效，但日常导航大多是单行，足够用了。

方法三：调整Padding（最小改动原有布局） #

如果你不想改display属性，也可以通过调整上下padding让文字自然居中。比如你想要导航项高度35px，那上下padding的总和加上文字默认高度要等于35px，调整后去掉固定height就行：

.mainav li a {
  display: block;
  color: black;
  text-align: center;
  padding: 9px 16px; /* 上下padding设为9px，让文字居中 */
  height: auto; /* 去掉固定height，用padding控制整体高度 */
  text-decoration: none;
}

这种方法不用动布局逻辑，只是微调padding，适合不想大改现有代码的情况。

完整修改后的代码示例（以Flex布局为例） #

CSS：

.mainav { 
  position: fixed; 
  top: 0; 
  z-index: 3; 
  width: 100%; 
} 
.mainav ul { 
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
  overflow: hidden; 
  background-color: #ffffff; 
} 
.mainav li { 
  float: left; 
  border-right: 1px solid #bbb; 
} 
.mainav li:last-child { 
  border-right: none; 
} 
.mainav li a { 
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px; 
  color: black; 
  padding: 0 16px; 
  text-decoration: none; 
}

HTML（无需改动）：

<div class="mainav"> 
  <ul> 
    <li><a href="/"><img src="" alt="Project Club Logo"></a></li> 
    <li><a href="/en/about">About</a></li> 
    <li><a href="/en/contact">Contact Us</a></li> 
    <li><a href="/en/pricing">Pricing</a></li> 
    <li><a href="/en/support">Support</a></li> 
    <li><a href="/en/login">Login</a></li> 
    <li><a href="/en/signup">Signup</a></li> 
  </ul> 
</div>

内容的提问来源于stack exchange，提问作者user9552143