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

Question

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

我用的HTML和CSS都在https://www.codeply.com/p/MU4zE84NJc里，问题出在table项。这是最小的，但我不能让它悬而未决。

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

Answer 1

尝试将“vertical-align”属性用于svg元素。

喜欢text-bottom、text-top

svg {
  vertical-align: text-bottom;
}