如何在不使用Bootstrap框架时实现Bootstrap SVG图标与相邻文本垂直居中

解决方法 #

这里有两种简单可靠的实现方案，都不需要引入额外框架：

方案1：Flex布局（兼容性好，适配所有尺寸图标）

直接给包裹图标和文字的外层span设置flex相关属性即可，不需要给内层元素单独加对齐规则，也能避免不同浏览器下的对齐偏差：

<!-- 24px图标示例 -->
<span style="display: inline-flex; align-items: center; gap: 4px;">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 24 24">
    <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
    <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
  </svg>
  <span>My Text 1</span>
</span>

<!-- 16px图标示例 -->
<span style="display: inline-flex; align-items: center; gap: 4px;">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
    <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
    <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
  </svg>
  <span>My Text 2</span>
</span>

代码里的gap: 4px是用来控制图标和文字之间的间距，你可以根据需要调整数值。

方案2：精简代码，直接给SVG加垂直对齐属性

你原来的代码里嵌套了多余的span，其实只需要给svg元素本身加vertical-align: middle，旁边的文字自然就能和图标垂直居中：

<span>
  <svg style="vertical-align: middle;" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 24 24">
    <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
    <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
  </svg>
  <span style="vertical-align: middle;">My Text 1</span>
</span>

如果还有细微的对齐偏差，给文字设置和图标高度相同的line-height属性就能解决，比如24px的图标就给文字加line-height: 24px。

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