Bootstrap折叠侧边栏：保持sidebar-header40px高度并居中strong元素

这问题我太熟悉了！本质是默认的HTML元素样式（比如<strong>的margin、line-height）和容器的高度限制冲突了，咱们一步步来修复：

核心思路 #

要让.sidebar-header严格保持40px高度，同时让<strong>内容完全居中，需要做到两点：

1. 清除容器和内容元素的默认内外边距，避免额外空间撑开高度
2. 用可靠的布局方式实现内容的水平+垂直居中

方案一：Flex布局（推荐，现代浏览器友好） #

修改你的CSS代码如下：

#sidebar.active .sidebar-header {
  height: 40px !important;
  /* 启用flex布局，一键实现居中 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  /* 清除默认内外边距 */
  padding: 0;
  margin: 0;
  /* 防止内容意外溢出 */
  overflow: hidden;
}

#sidebar.active .sidebar-header strong {
  display: block;
  /* 清除strong的默认样式 */
  margin: 0;
  padding: 0;
  /* 调整字体大小确保在40px高度内（可根据需求修改） */
  font-size: 16px;
  /* 取消默认行高，避免额外高度 */
  line-height: 1;
}

方案二：Line-height传统布局 #

如果需要兼容非常老旧的浏览器，可以用这个方法：

#sidebar.active .sidebar-header {
  height: 40px !important;
  text-align: center; /* 水平居中 */
  padding: 0;
  margin: 0;
  overflow: hidden;
}

#sidebar.active .sidebar-header strong {
  display: inline-block;
  /* 让行高等于容器高度，实现垂直居中 */
  line-height: 40px;
  margin: 0;
  padding: 0;
  font-size: 16px;
}

额外检查 #

如果还是有问题，打开浏览器开发者工具（F12）查看.sidebar-header和<strong>的盒模型，确认是否有其他CSS规则（比如父元素的padding、全局的<strong>样式）在影响高度，针对性覆盖即可。

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