Bootstrap 4菜单文本垂直对齐求助：选中项边框与布局冲突

嘿，我完全懂你的困扰——想要菜单项文本垂直居中，同时选中时底部显示边框，结果用了display: table和vertical-align: middle把整个菜单布局搞乱了对吧？别担心，咱们换个更稳妥的现代CSS方案就能搞定，不用再依赖容易冲突的table布局。

核心问题分析 #

display: table会改变元素的盒模型和排列规则，很容易和菜单里的其他元素（比如原本是inline-block的菜单项）产生布局冲突，所以咱们直接放弃这种方式，用更灵活的Flex布局或者固定高度下的line-height方案。

方案一：Flex布局（推荐，适配各种场景） #

Flex是现代CSS布局的首选，它能轻松实现垂直居中，同时保持菜单的横向排列稳定：

/* 父容器设置为flex，让菜单项横向排列并垂直居中 */
.infos-btn {
  text-transform: uppercase;
  color: #482A81;
  box-shadow: 0px 3px 10px #888;
  display: flex; /* 关键：开启flex布局 */
  align-items: center; /* 子元素垂直居中 */
}

/* 菜单项设置内边距，控制点击区域和文本间距 */
.infos-btn > div {
  padding: 12px 16px; /* 上下内边距保证文本垂直方向的空间 */
}

.infos-btn > div:hover {
  cursor: pointer;
}

/* 选中状态直接加底部边框，不会影响居中效果 */
.selected-btn {
  border-bottom: 3px solid #482A81;
  color: #482A81;
  font-weight: bold;
}

为什么这个方案有效？

• display: flex让父容器的子元素（菜单项）自动横向排列，不会出现table布局的错位问题。
• align-items: center会让所有菜单项在垂直方向上居中，不管菜单项的内容是单行还是多行。
• 用padding控制菜单项的上下空间，既保证了文本的居中视觉效果，又扩大了点击区域，提升用户体验。

方案二：固定高度菜单用line-height（简单直接） #

如果你的菜单高度是固定的，用line-height实现垂直居中会更简单：

.infos-btn {
  text-transform: uppercase;
  color: #482A81;
  box-shadow: 0px 3px 10px #888;
}

/* 菜单项设为inline-block实现横向排列，固定高度+行高实现垂直居中 */
.infos-btn > div {
  display: inline-block;
  height: 48px; /* 固定菜单高度 */
  line-height: 48px; /* 行高等于高度，文本自动垂直居中 */
  padding: 0 16px; /* 左右内边距控制横向间距 */
}

.infos-btn > div:hover {
  cursor: pointer;
}

.selected-btn {
  border-bottom: 3px solid #482A81;
  color: #482A81;
  font-weight: bold;
}

注意事项：这个方案只适合单行文本的菜单项，如果文本可能换行，line-height就会失效，这时候还是用Flex布局更靠谱。

避坑提示 #

• 尽量避免用display: table/table-cell来做菜单的垂直居中，这种布局的兼容性虽然好，但会破坏元素的默认排列规则，很容易导致菜单整体错位。
• 选中状态的border-bottom不会影响元素的垂直居中，因为边框是在元素盒模型的外部（除非你设置了box-sizing: border-box，但即使设置了，只要上下padding足够，也不会影响文本居中）。

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