【问题标题】：SVG inside span isn't on the same line as the textspan 内的 SVG 与文本不在同一行
【发布时间】：2018-03-12 05:18:51
【问题描述】：
我在一个跨度内同时有一个带有文本的 SVG 文件。文本和 SVG 的高度相同。但是，SVG 与文本不在同一行。
相关jsfiddle：https://jsfiddle.net/tcrnjd53/
如您所见，facebook 徽标需要位于红色虚线上，就像示例文本一样。
span {
font-size: 1em;
border-bottom: 1px dotted red;
zoom: 3; /* for easier readability */
}
span svg {
fill: #3b5998;
height: 1em;
}
<span>Sample Text <svg viewBox="0 0 24 24"><path d="M22.676 0H1.324C.593 0 0 .593 0 1.324v21.352C0 23.408.593 24 1.324 24h11.494v-9.294H9.689v-3.621h3.129V8.41c0-3.099 1.894-4.785 4.659-4.785 1.325 0 2.464.097 2.796.141v3.24h-1.921c-1.5 0-1.792.721-1.792 1.771v2.311h3.584l-.465 3.63H16.56V24h6.115c.733 0 1.325-.592 1.325-1.324V1.324C24 .593 23.408 0 22.676 0"></path></svg></span>
【问题讨论】：
标签：
html
css
svg
alignment
vertical-alignment
【解决方案1】：
默认vertical-align 属性为baseline - 将其更改为bottom。请参阅下面的演示：
span {
font-size: 1em;
border-bottom: 1px dotted red;
zoom: 3; /* for easier readability */
}
span svg {
fill: #3b5998;
height: 1em;
vertical-align: bottom; /* ADDED */
}
<span>Sample Text <svg viewBox="0 0 24 24"><path d="M22.676 0H1.324C.593 0 0 .593 0 1.324v21.352C0 23.408.593 24 1.324 24h11.494v-9.294H9.689v-3.621h3.129V8.41c0-3.099 1.894-4.785 4.659-4.785 1.325 0 2.464.097 2.796.141v3.24h-1.921c-1.5 0-1.792.721-1.792 1.771v2.311h3.584l-.465 3.63H16.56V24h6.115c.733 0 1.325-.592 1.325-1.324V1.324C24 .593 23.408 0 22.676 0"></path></svg></span>
【解决方案2】：
CSS vertical-align 属性可以提供帮助，如 sn-p 所示。选择合适的值取决于您。为了更好地理解我的意思，请尝试以下值top,text-top,middle,bottom,text-bottom 并查看差异。如果最合适，您可以应用固定值或百分比值。
span {
font-size: 1em;
border-bottom: 1px dotted red;
zoom: 3; /* for easier readability */
}
span svg {
fill: #3b5998;
height: 1em;
/*
vertical-align:text-top;
*/
vertical-align:-0.1875em;
}
<span>Sample Text <svg viewBox="0 0 24 24"><path d="M22.676 0H1.324C.593 0 0 .593 0 1.324v21.352C0 23.408.593 24 1.324 24h11.494v-9.294H9.689v-3.621h3.129V8.41c0-3.099 1.894-4.785 4.659-4.785 1.325 0 2.464.097 2.796.141v3.24h-1.921c-1.5 0-1.792.721-1.792 1.771v2.311h3.584l-.465 3.63H16.56V24h6.115c.733 0 1.325-.592 1.325-1.324V1.324C24 .593 23.408 0 22.676 0"></path></svg></span>
【解决方案3】：
当line-height 与font-size 不同时，以前的解决方案不起作用。为了正确处理这种情况，请使用text-bottom 而不是bottom。
span {
font-size: 20px;
line-height: 30px;
border-bottom: 1px dotted red;
zoom: 3; /* for easier readability */
}
span svg {
fill: #3b5998;
height: 1em;
vertical-align: text-bottom;
}
<span>Sample Text <svg viewBox="0 0 24 24"><path d="M22.676 0H1.324C.593 0 0 .593 0 1.324v21.352C0 23.408.593 24 1.324 24h11.494v-9.294H9.689v-3.621h3.129V8.41c0-3.099 1.894-4.785 4.659-4.785 1.325 0 2.464.097 2.796.141v3.24h-1.921c-1.5 0-1.792.721-1.792 1.771v2.311h3.584l-.465 3.63H16.56V24h6.115c.733 0 1.325-.592 1.325-1.324V1.324C24 .593 23.408 0 22.676 0"></path></svg></span>