如何使 Bootstrap SVG 图标居中？答案

【问题标题】：How to center Bootstrap SVG Icon?如何使 Bootstrap SVG 图标居中？
【发布时间】：2021-10-31 16:40:29
【问题描述】：

我想在没有引导程序的情况下使用 Bootstrap SVG 图标。

https://icons.getbootstrap.com/icons/arrow-clockwise/

查看此代码：

<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 图标的中心？

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

我会为此使用 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>

【讨论】：

如果我将 16 替换为 24 等其他尺寸，它将无法对齐

【解决方案2】：

您必须将 SVG 的高度与文本相匹配，并稍微更改布局。试试这个：

<div style="display: flex; align-items: center;">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 18 18" style="margin-right: 4px;">
        <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>
</div>

只包括1个，你可以类似地生产另一个。

【讨论】：

如果我把 18 换成 24 等其他尺寸，它就不会对齐
不会，如果你想要 24，那么你必须增加包含文本的 span 的高度，然后将文本放在它的中间。

【解决方案3】：

我假设您也在使用 Bootstrap，因此使用了其中的一些 util 类并将这些项目包装在 hstack 元素中以分散它们。使用较小的图标似乎还可以，但对我来说，随着图标变大，看起来会有些偏差。

<div class="hstack gap-4">
  <div>
    <span class="d-inline-block align-middle">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 18 18">
        <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 class="d-inline-block align-middle">My Text 1</span>
  </div>

  <div>
    <span class="d-inline-block align-middle">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 18 18">
        <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 class="d-inline-block align-middle">My Text 2</span>
  </div>

  <div>
    <span class="d-inline-block align-middle">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 18 18">
        <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 class="d-inline-block align-middle">My Text 3</span>
  </div>
</div>

这是一个代码笔：https://codepen.io/themelizeme/pen/eYEGBMq

【讨论】：

OP 没有使用 Bootstrap（写在第一行）。
你说得对，我错了！