WordPress单个菜单背景CSS垂直居中问题：vertical-align不生效

看起来你遇到的是WordPress菜单里常见的垂直对齐问题——文字和其他菜单项对齐，但背景容器偏下，单纯用vertical-align没效果对吧？这主要是因为默认菜单项的元素类型和盒模型导致的，咱们来一步步解决：

方案1：改用inline-block并设置合理内边距 #

首先把.menu-button设置为inline-block，这样元素能正确识别上下内边距，同时给上下加合适的padding来让背景包裹文字并居中：

.menu-button {
  display: inline-block; /* 关键：让元素盒模型正常工作 */
  background: #cbbba0;
  padding: 8px 16px; /* 上下内边距撑开背景，左右留空间 */
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  text-align: center;
}

方案2：匹配父元素行高 #

如果你的导航栏有固定高度（比如父菜单项的line-height是40px），可以让.menu-button继承或设置相同的行高，同时去掉上下padding，这样文字会自动垂直居中：

.menu-button {
  display: inline-block;
  background: #cbbba0;
  padding: 0 16px; /* 只保留左右内边距 */
  line-height: 40px; /* 和父菜单项的行高保持一致 */
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  text-align: center;
}

方案3：用Flex布局兜底 #

如果上面两种方法都不生效，试试Flex布局，它的垂直对齐逻辑更直观可靠：

.menu-button {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  background: #cbbba0;
  padding: 8px 16px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
}

为什么之前的vertical-align没用？ #

vertical-align只对行内元素和行内块元素生效，而且它对齐的是元素的基线，不是容器的中心。如果你的菜单项默认是inline元素，上下padding不会撑开容器的高度，导致背景只能跟着基线偏移，看起来就偏下了。改成inline-block或flex后，元素的盒模型会正确计算，内边距和对齐属性才能发挥作用。

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