跨度内的SVG与文本不在同一行

Question

我同时在一个跨度内有文本的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>

Answer 1

CSSvertical-align属性可以提供帮助，如代码段所示。选择合适的值取决于您。为了更好地理解我的意思，请尝试以下值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>

Answer 2

默认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>