如何设置按钮内部图标与文本的不同位置：图标靠左、文本居中

问题原因 #

justify-content 是Flex容器的专属属性，仅作用于设置了display: flex的父元素，你给子元素.buttonIcon、.buttonText设置该属性本身就不会生效，同时原有写法也无法满足「图标位于按钮左侧、文本在整个按钮范围内居中」的需求。
另外注意你现有HTML代码里buttonSpan的className属性少了闭合单引号，记得修正避免样式匹配失败：

<!-- 修正后的HTML -->
<button className='button'>
  <span className='buttonSpan'>
    <span className='buttonIcon'>
      <Icon />
    </span>
    <span className='buttonText'>
      Next
    </span>
  </span>
</button>

可行实现方案 #

无需修改现有DOM结构，推荐以下两种方案：

方案1：CSS Grid实现（更直观灵活）

通过三列等分布局实现文本天然居中，不需要手动计算定位值：

.button {
  // 按钮宽高、内边距可根据需求自定义
  width: 200px;
  padding: 8px 12px;
  border: none;
  
  .buttonSpan {
    display: grid;
    // 左右两列等宽，中间列宽度跟随文本内容自适应
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
  }

  .buttonIcon {
    // 图标靠左对齐
    justify-self: start;
    // 如果图标有固定宽度可直接写死，布局更稳定，比如 width: 20px;
  }

  .buttonText {
    // 文本在中间列居中，天然处于整个按钮的正中间
    justify-self: center;
  }
}

方案2：Flex + 绝对定位实现（兼容性更好）

适合需要兼容低版本浏览器的场景：

.button {
  position: relative;
  width: 200px;
  padding: 8px 12px;
  border: none;
  
  .buttonSpan {
    display: flex;
    // 直接让容器内容居中，文本自然处于按钮中间
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .buttonIcon {
    position: absolute;
    // 定位值和按钮左内边距保持一致即可
    left: 12px;
  }

  // 如果文本较长，可添加左右内边距避免和图标重叠
  .buttonText {
    padding: 0 24px;
  }
}

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