html - 如何将 元素与文本对齐？

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;
}