如何仅用CSS实现动态按钮组内Span元素的指定对齐效果？

完全可以通过纯CSS实现，核心思路是利用CSS Grid（尤其是subgrid特性）让所有按钮内的文本容器共享最长文本的宽度，同时保证按钮占满父容器宽度，具体方案如下：

实现代码 #

HTML（保留原结构，仅添加类名便于样式控制） #

<div class="btn-container">
    <button>
        <span>Short</span>
    </button>
    <button>
        <span>Long label</span>
    </button>
    <button>
        <span>Medium</span>
    </button>
</div>

CSS #

/* 基础布局：按钮垂直排列，占满父容器宽度 */
.btn-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem; /* 按钮间距，可按需调整 */
}

/* 按钮样式：占满父容器宽度，内部用Grid控制文本位置 */
.btn-container button {
  width: 100%;
  display: grid;
  justify-content: center; /* 让文本容器在按钮内居中 */
  padding: 0.5rem 1rem; /* 按钮内边距，可按需调整 */
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* 文本对齐：文本在自身容器内左对齐 */
.btn-container button span {
  justify-self: start;
}

/* 利用subgrid统一所有文本容器的宽度（适配现代浏览器） */
@supports (grid-template-columns: subgrid) {
  .btn-container {
    grid-template-columns: max-content; /* 列宽由最长文本决定 */
  }
  .btn-container button {
    grid-column: 1 / -1; /* 按钮跨满父容器列宽 */
    display: grid;
    grid-template-columns: subgrid; /* 继承父容器的列宽，让所有span宽度一致 */
    justify-content: stretch; /* 按钮强制占满父容器宽度 */
  }
}

原理说明 #

1. 按钮占满父容器：父容器通过grid-template-columns: 1fr让每个按钮自动填满容器宽度；
2. 文本容器居中：按钮内部用Grid布局，justify-content: center让文本容器（span）在按钮水平方向居中；
3. 统一文本容器宽度：通过subgrid特性，让所有按钮内的文本容器继承父容器的列宽（由最长文本决定），确保所有span宽度一致；
4. 文本左对齐：span设置justify-self: start，让文本在统一宽度的容器内左对齐，自然对齐到最长文本的左侧，而最长文本的容器宽度等于自身内容宽度，看起来就是文本居中。

该方案兼容所有支持subgrid的现代浏览器（Chrome 117+、Firefox 71+、Safari 16+），对于不支持subgrid的旧浏览器，会降级为每个按钮的文本容器宽度等于自身内容宽度，文本在按钮内居中左对齐，仍能保证基础可用性。

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