时间戳

首页 > 解决方案 > 如何使 Bootstrap SVG 图标居中？

css - 如何使 Bootstrap SVG 图标居中？

问题描述

我想使用没有引导程序的引导程序 SVG 图标。

https://icons.getbootstrap.com/icons/arrow-顺时针/

请参阅此代码：

<span>
  <span style="vertical-align:middle;display:inline-block;">
    <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>
  <span style="vertical-align:middle;display:inline-block;">My Text 1</span>
</span>

<span>
  <span style="vertical-align:middle;display:inline-block;">
    <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>
  <span style="vertical-align:middle;display:inline-block;">My Text 2</span>
</span>

我的问题：如何将文本垂直对齐到它旁边的 SVG 图标的中心？

标签： csstwitter-bootstrap

解决方案

我会为此使用 flexbox。就像是：

<span style="display: inline-flex; gap: 5px; align-items: center;">
  <span style="display: flex; align-items: center; justify-content: center;">
    <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>
  <span>My Text 2</span>
</span>

<span style="display: inline-flex; gap: 5px; align-items: center;">
  <span style="display: flex; align-items: center; justify-content: center;">
    <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>
  <span>My Text 2</span>
</span>

推荐阅读