span元素内容无法与容器垂直对齐的技术问题求助

我制作了一个包含span元素的按钮，但span内的文本无法与其容器垂直对齐。尝试过flex布局和align-center属性，都没解决问题。

现有代码 #

CSS #

.ExpandButton {
  border: 2px solid #440099;
  background-color: #ffffff;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #7d4eb8;
  line-height: 1;
  padding-right: 32px;
}

span {
  font-size: 12px;
  line-height: 1;
}

HTML #

<div class="ExpandButton"><span>More Actions</span></div>

问题原因与解决办法 #

问题核心是line-height: 1的设置导致文本行高和容器实际高度不匹配，加上span作为行内元素的默认对齐逻辑，引发了垂直偏移。以下是两种可靠的解决方式：

方法1：匹配容器高度设置line-height #

容器上下内边距为8px，文本字号12px，容器总高度为12px + 8px*2 = 28px，将容器的line-height设为28px即可让文本垂直居中，同时可以移除span的line-height设置：

.ExpandButton {
  border: 2px solid #440099;
  background-color: #ffffff;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #7d4eb8;
  line-height: 28px; /* 匹配容器高度 */
  padding-right: 32px;
}

span {
  font-size: 12px;
}

方法2：用Flex布局实现灵活居中 #

直接给容器添加display: flex和align-items: center属性，就能让span元素自动垂直居中，这种方法无需计算高度，适配性更强：

.ExpandButton {
  border: 2px solid #440099;
  background-color: #ffffff;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #7d4eb8;
  padding-right: 32px;
  display: flex;
  align-items: center; /* 垂直居中 */
}

span {
  font-size: 12px;
  line-height: 1;
}

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