按钮内文本无法垂直居中显示的问题求助

问题描述 #

已查阅Stackoverflow上所有相关解决方案，但均无效。尝试过调整font-size、line-height、height、box-sizing、padding、vertical-align、display及position属性，不想使用absolute positioning，因为希望容器能根据文本大小自然调整。

按钮最内层span中的文本总是向上偏移到容器内边距区域，无法垂直居中。添加了display: flex; align-items: flex-end后，文本稍有下移但未解决问题。

相关代码如下：

HTML结构 #

<div class="elementor-button-wrapper">
  <a class="elementor-button">
     <span class="elementor-button-content-wrapper">
        <span class="elementor-button-text">
           Order Now
        </span>
     </span>
  </a>
</div>

现有CSS #

.elementor-button-wrapper {box-sizing: border-box}
.elementor-button {
   line-height: 1.2em;
   display: inline-block;
   padding: 12px 24px;
   box-sizing: border-box;
}
.elementor-button-content-wrapper {
   display: flex;
   justify-content: center;
   box-sizing: border-box;
   line-height: 1.2em;
}
.elementor-button-text {
   display: flex;
   align-items: flex-end;
   box-sizing: border-box;
   line-height: 1.2em;
}

问题原因 #

1. 多层Flex嵌套+错误对齐设置：最内层的.elementor-button-text设置了display: flex和align-items: flex-end，强制文本在自身容器内靠下，和外层布局逻辑冲突。
2. 重复的line-height设置：三层元素都设置line-height:1.2em，导致垂直空间计算混乱，结合部分字体的基线特性，加剧了视觉偏移。

解决方案 #

调整CSS简化布局逻辑，让外层容器负责垂直居中，移除内层不必要的设置：

.elementor-button-wrapper {box-sizing: border-box}
.elementor-button {
   line-height: 1.2em;
   display: inline-flex; /* 改为inline-flex，兼顾行内特性与flex布局能力 */
   align-items: center; /* 核心：实现内部元素垂直居中 */
   padding: 12px 24px;
   box-sizing: border-box;
}
.elementor-button-content-wrapper {
   justify-content: center;
   box-sizing: border-box;
   /* 移除重复line-height，继承父级即可 */
}
.elementor-button-text {
   box-sizing: border-box;
   line-height: normal; /* 重置line-height，避免与父级叠加冲突 */
   /* 移除display:flex和align-items:flex-end，消除强制靠下的逻辑 */
}

说明 #

• inline-flex替代inline-block，既能保持按钮的行内特性，又能通过align-items:center直接实现内部元素垂直居中，容器会自动根据文本大小调整尺寸，符合需求。
• 移除内层冗余的Flex设置和重复line-height，避免布局逻辑冲突，彻底解决文本偏移问题。

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