如何将文本与 SVG 元素对齐？ [复制]

Posted 2023-03-05

【中文标题】如何将文本与 SVG 元素对齐？ [复制]

【英文标题】：How do you align text with SVG elements? [duplicate]

【发布时间】：2016-10-11 01:25:13

【问题描述】：

我有一堆 SVG 图标和文本来搭配它们。但是，文本与图标不对齐。请参阅此代码：

<span class="cardSpan">
    <svg style="width:24px;height:24px" viewBox="0 0 24 24">
        <path fill="#000000" d="M12 4C14.2091 4 16 5.79086 16 8C16 10.2091 14.2091 12 12 12C9.79086 12 8 10.2091 8 8C8 5.79086 9.79086 4 12 4ZM12 14C16.4183 14 20 15.7909 20 18L20 20L4 20L4 18C4 15.7909 7.58172 14 12 14Z"></path>
    </svg>
       John Johnson
</span>
<p>

<span class="cardSpan">
    <svg style="width:24px;height:24px" viewBox="0 0 24 24">
        <path fill="#000000" d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z" />
    </svg>
       Streetlane 123
</span>
</p>

<p>
<span class="cardSpan">
    <svg style="width:24px;height:24px" viewBox="0 0 24 24">
        <path fill="#000000" d="M14,10V4.5L19.5,10M5,3C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V9L15,3H5Z" />
    </svg>
       These are some cool notes.
</span>
</p>

我的问题：如何将文本与旁边的每个 SVG 图标的中心对齐？

【问题讨论】：

你的意思是垂直居中吗？

是的！我会调整措辞。

简单，将svg 视为img 标签并在链接线程中添加vertical-align: middle。

谢谢，这对我有用！我不确定是删除这个问题还是保留它，以便其他人可以重定向到另一个问题。

我会把它留给你 :) 就我个人而言，我认为不应该总是删除重复的问题。它们可以作为路标。

【参考方案1】：

请看下面的演示：

.icon,
.text 
  vertical-align: middle;
  display: inline-block;

<span class="cardSpan">
  <span class="icon">
    <svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#000000" d="M12 4C14.2091 4 16 5.79086 16 8C16 10.2091 14.2091 12 12 12C9.79086 12 8 10.2091 8 8C8 5.79086 9.79086 4 12 4ZM12 14C16.4183 14 20 15.7909 20 18L20 20L4 20L4 18C4 15.7909 7.58172 14 12 14Z"></path></svg>
  </span>
  <span class="text">John Johnson</span>
</span>

<p>
  <span class="cardSpan">
    <span class="icon">
      <svg style="width:24px;height:24px" viewBox="0 0 24 24">
        <path fill="#000000" d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z" />
      </svg>
    </span>
    <span class="text">Streetlane 123</span>
  </span>
</p>

<p>
  <span class="cardSpan">
    <span class="icon">
      <svg style="width:24px;height:24px" viewBox="0 0 24 24">
        <path fill="#000000" d="M14,10V4.5L19.5,10M5,3C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V9L15,3H5Z" />
      </svg>
    </span>
    <span class="text">These are some cool notes.</span>
  </span>
</p>