如何用Flex实现按钮内箭头居左、文字居中的布局？

用Flex布局+绝对定位就能轻松实现需求，既让箭头固定在按钮左侧，又能保证“back”文字处于按钮整体的中间位置，完整代码如下：

<button style="width: 80px; position: relative; display: flex; align-items: center; justify-content: center; padding: 4px 0;">
  <span style="position: absolute; left: 6px;">←</span>
  back
</button>

关键逻辑拆解： #

• 给按钮设置position: relative：让内部箭头元素能基于按钮本身定位，不会超出按钮范围。
• display: flex; align-items: center; justify-content: center;：让按钮内的“back”文字默认处于按钮的水平、垂直居中位置。
• 箭头用position: absolute; left: 6px;：脱离正常文档流，固定在按钮左侧（left值可根据视觉需求调整间距），不会挤占“back”文字的居中空间。
• 额外添加padding: 4px 0;：调整按钮上下内边距，优化整体视觉舒适度，可按需修改。

如果不想用绝对定位，也可以用嵌套Flex的方式实现：

<button style="width: 80px; display: flex; align-items: center;">
  <span style="width: 16px;">←</span>
  <span style="flex: 1; text-align: center; margin-left: -16px;">back</span>
</button>

这种方式给箭头设置固定宽度，再让文字容器的margin-left抵消箭头宽度，从而让文字基于整个按钮宽度居中，但相对来说第一种绝对定位的方式更简洁灵活。

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