如何实现网格布局中按钮内图片与文字水平对齐且位置统一

默认行内元素排版会随内容宽度自动调整位置，使用flex布局即可固定内部元素位置，满足对齐要求：

核心修改点 #

• 每行按钮的父容器设为flex布局，设置justify-content: space-between保证三个按钮均匀分布，同列按钮自然纵向对齐
• 按钮自身使用flex布局，align-items: center一键实现内部图片和文字垂直居中
• 给图片设置固定的margin-right，固定文字和图片的间距，不受文字长度影响

完整可运行代码 #

<!-- 第一行按钮父容器 -->
<div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
  <button style="padding: 10px 16px; display: flex; align-items: center; width: 32%;">
    <img style="width: 22px; height: 22px; margin-right: 10px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png" alt="Text" />
    <span>Click to Stage</span>
  </button>
  <button style="padding: 10px 16px; display: flex; align-items: center; width: 32%;">
    <img style="width: 22px; height: 22px; margin-right: 10px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png" alt="Text" />
    <span>Howzaat</span>
  </button>
  <button style="padding: 10px 16px; display: flex; align-items: center; width: 32%;">
    <img style="width: 22px; height: 22px; margin-right: 10px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png" alt="Text" />
    <span>Hurrey with the mission</span>
  </button>
</div>
<!-- 第二行按钮父容器 -->
<div style="display: flex; justify-content: space-between;">
  <button style="padding: 10px 16px; display: flex; align-items: center; width: 32%;">
    <img style="width: 22px; height: 22px; margin-right: 10px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png" alt="Text" />
    <span>Stage</span>
  </button>
  <button style="padding: 10px 16px; display: flex; align-items: center; width: 32%;">
    <img style="width: 22px; height: 22px; margin-right: 10px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png" alt="Text" />
    <span>catch me if you can</span>
  </button>
  <button style="padding: 10px 16px; display: flex; align-items: center; width: 32%;">
    <img style="width: 22px; height: 22px; margin-right: 10px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png" alt="Text" />
    <span>jungle mission</span>
  </button>
</div>

你可以根据需求调整margin-right的数值修改图片和文字的间距，调整父容器的margin-bottom修改两行按钮的上下间距。

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