不使用padding等技巧如何实现下拉菜单文本垂直居中

问题原因 #

vertical-align 属性仅对行内元素、行内块元素、表格单元格元素生效，你代码中<a>标签被设置为display: block块级元素，因此该属性无法生效，导致文本始终靠顶部显示。

修复方案 #

将导航项的<a>标签设置为Flex布局即可快速实现垂直+水平居中，仅需要修改#navbar li a的样式规则：

#navbar li a {
  display: flex;
  align-items: center; /* 实现垂直居中 */
  justify-content: center; /* 实现水平居中 */
  height: 100px;
  text-decoration: none; /* 可选：去掉默认下划线，更美观 */
  color: #000; /* 可选：自定义文本颜色 */
}

可删除的冗余代码 #

你当前代码中存在以下无意义或重复的规则，可以直接删除：

• #navbar ul li:hover：和上层#navbar li:hover的效果完全重复，所有li元素hover时的背景色规则已经统一设置
• #vnavbar ul：不存在匹配的DOM元素，你的vnavbar本身就是ul节点，没有嵌套子ul
• #vnavbar：设置的width: 100%已经继承自父级#navbar ul的规则，重复设置无意义
• 如果你使用了上述Flex修复方案，原#navbar li a中的text-align: center也可以删除，justify-content: center已经实现了水平居中效果

完整修改后CSS代码 #

#navbar ul {
  display: none;
  position: absolute;
  top: 100%;
}

#navbar li:hover ul {
  display: block;
}

#navbar,
#navbar ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#navbar {
  height: 100px;
  width: 100%;
}

#navbar li {
  float: left;
  position: relative;
  height: 100%;
  width: 25%;
}

#navbar li a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  text-decoration: none;
  color: #000;
}

#navbar ul li {
  float: none;
}

#navbar li:hover {
  background-color: #6da3a3;
}

#vnavbar li {
  width: 100%;
  height: 100px;
}

HTML代码无需修改，运行后即可实现所有导航文本的垂直水平居中效果。

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