macOS风格CSS弹窗按钮文本未居中问题求助

核心问题分析 #

1. 选择器不匹配：HTML中按钮的父容器是btn-group，但CSS中针对popover内按钮的样式写的是#popover .btn-container .btn-lg，这导致该样式规则无法作用到目标按钮，按钮实际继承了全局.btn的样式，而全局.btn的高度、内边距设置和.btn-lg冲突，导致文本位置异常。
2. Flex容器未配置居中：按钮使用inline-flex布局时，默认主轴对齐方式是flex-start，需要显式设置水平和垂直居中属性才能让文本在按钮内部居中。

修复步骤 #

步骤1：修正CSS选择器匹配问题

将CSS中针对popover内按钮的选择器从#popover .btn-container .btn-lg改为#popover .btn-group .btn-lg，确保样式能正确应用：

#popover .btn-group .btn-lg {
  display: inline-flex;
  /* 添加flex居中属性 */
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  opacity: 1;
  line-height: 16px;
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: -0.2px;
  text-align: center;
  padding-block: 5px !important;
  padding-inline: 15px;
  height: 26px !important;
}

步骤2：确保Flex布局下的文本居中

在.btn-lg的样式中添加justify-content: center（水平居中）和align-items: center（垂直居中），这两个属性是flex容器内内容居中的关键，补充后按钮文本就能在容器内完全居中。

可选优化：统一按钮样式优先级

如果全局.btn的样式仍然干扰.btn-lg，可以调整选择器优先级，或者在.btn-lg中覆盖冲突属性：

#popover .btn-group .btn-lg {
  /* 原有样式 */
  /* 覆盖全局.btn的margin和height属性 */
  margin: 5px;
  height: 26px !important;
}

验证修复后的效果 #

修改后，popover内的按钮会正确应用.btn-lg的样式，flex布局的居中属性会让文本在按钮内水平和垂直方向都居中，和其他场景下的表现一致。

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