如何将文本与SVG元素对齐？

我有一堆SVG图标和文字与他们一起去。但是，文字不符合图标。看到这个代码：如何将文本与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图标的中心？

来源

2016-06-10 ohyeah

你的意思是垂直中心？ – Harry

是的！我会调整措辞。 – ohyeah

很简单，将'svg'视为'img'标签，并在链接的线程中添加'vertical-align：middle'。 – Harry

.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>

来源

2016-06-10 07:19:27

如何将文本与SVG元素对齐？

回答

相关问题