如何将 <svg> 元素与文本对齐？答案

【问题标题】：How can I align a <svg> element with text?如何将 <svg> 元素与文本对齐？
【发布时间】：2021-01-19 05:08:08
【问题描述】：

我想在文本旁边使用 Bootstrap 图标来帮助区分我正在设计的简单网页中的选项/项目，但 <svg> 元素相对于文本略微偏离。我正在使用带有个人 css 文件的 Bootstrap 4.0.0 来调整一些事情。

我使用的 HTML 和 CSS 都在 https://www.codeply.com/p/MU4zE84NJc 中，问题可以在表项中看到。这是最小的，但我不能让它没有解决。

知道如何确保<svg> 元素与文本保持对齐吗？

【问题讨论】：

【解决方案1】：

尝试对 svg 元素使用“vertical-align”属性。

喜欢 text-bottom, text-top

svg {
  vertical-align: text-bottom;
}

【讨论】：