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

Question

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

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

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

Answer 1

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

就像文本底部、文本顶部

svg {
  vertical-align: text-bottom;
}