html - 嵌入式 SVG 与元素未对齐

Question

所以我正在尝试从 PNG 转移到 SVG，但我遇到了一些成长的烦恼。我想使用嵌入式 SVG，这样我就可以更改它们的颜色的 CSS 属性，同时减少资源负载。尽管我遇到的问题是嵌入 SVG 时它出现在提供的框上方，但如果我使用 img 标签链接到 SVG，格式是完美的。

在我的图片中，右边的框有 img 标签，而左边的框是嵌入的。

http://jsfiddle.net/fLWhu/684/

<span>
                            @Html.Raw(File.ReadAllText(Server.MapPath("~/Content/images/icons/1.svg")))

</span>
<span>
<img src="~/Content/images/icons/1.svg" alt="our linked in" /> 
</span>

更新:

添加后

     display:inline-block;
     vertical-align:middle;

进入span，结果是。

Answer 1

SVG 部分看起来没问题，你可以尝试设置一个 display:inline-block 和 vertical align:middle 到 div.header .right p span 元素