如何将SVG图标对齐到按钮右侧，同时保留文本在左侧？

要实现按钮左侧显示“Retry”文本、右侧显示SVG图标的布局，只需调整flex布局的对齐属性并优化内边距设置即可，修改后的代码如下：

修改后的CSS代码 #

.errorButtonRetry {
  position: absolute;
  height: 31px;
  left: 61px;
  top: 262px;
  width: 210px;
  background: blue;
  border-radius: 2px;
  border: none;
  display: flex;
  align-items: center; /* 让内容垂直居中 */
  justify-content: space-between; /* 文本靠左、图标靠右分布 */
  padding: 0 12px; /* 统一左右内边距，避免上下padding挤压内容 */
  cursor: pointer;
}

.button__text {
  color: #FFFFFF;
  font-family: Source Code Pro;
  font-weight: 500;
  font-size: 13px;
}

.iconWrapper {
  width: 18px;
  height: auto;
}

.iconWrapper svg {
  display: block; /* 消除SVG默认行内元素的间距 */
  width: 100%;
  height: auto;
}

修改后的HTML代码 #

<button class='errorButtonRetry'>
    <span class='button__text'>Retry</span>
    <div class="iconWrapper">
        <!-- svg为圆形叉号图标 -->
        <svg viewBox="0 0 512 512">
                <path d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" stroke-width="32"/>
                <path fill="none" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M256 176v160M336 256H176"/>
        </svg>
    </div>
</button>

关键修改说明 #

• 利用justify-content: space-between实现文本与图标的左右分离布局
• 通过align-items: center让文本和图标在按钮内垂直居中
• 移除原有的padding-top和text-align: left，改用flex属性控制布局更简洁
• 将iconWrapper的内联样式移到CSS中，提升代码可维护性
• 给SVG添加display: block，消除默认行内元素带来的底部间距

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