html图标与文字对齐,html – 垂直对齐文本和SVG图标

我正在尝试将SVG图标与文本对齐.我已经阅读了很多关于如何使用它的信息来源,使用vertical-align：middle是它的最佳选择.

我也能够做到,但有一个问题我想要答案.

我见过的所有资源都告诉你只在img元素上放置vertical-align：middle.例如.

但在我的特殊情况下,我需要在svg和span元素上放置vertical-align：middle.差异非常微妙.但它就在那里.

这是小提琴：

html, body {

font-size: 32px;

}

.icon {

height: 64px;

width: 64px;

vertical-align: middle;

}

span {

vertical-align: middle; // Try commenting this line

}

• 3.4Km

尝试注释为span标记提供垂直对齐的行,并看到文本向上移动.

有人能告诉我为什么我需要垂直对齐我的svg和span标签而不仅仅是svg,因为它在其他地方工作吗？