如何将 svg 图标内联与 boostrap 中的文本对齐？

Question

https://jsfiddle.net/a7uxLkyt/

我只想在线显示文本和图标。 我究竟做错了什么？ class="d-inline"是否正确？

<div>
        <div class="d-inline">inline text</div>
        <div title="Test" class="d-inline" style="fill:grey">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M14.7071,1.29289075 .... see fiddle"/>
            </svg>
        </div>          
</div>    

Answer 1

你的代码看起来不错。 唯一剩下的是 SVG 的大小：请定义其大小或使用一些 CSS 代码，例如：

svg {
  width: 40px;
}

Answer 2

你能检查下面的代码吗？ 希望它对你有用。 我们提供了引导类align-middle和d-inline-block ，它们将垂直对齐文本和图像，即使图像宽度增加（目前我们已经为图标指定了特定的width:32px; ）。

请参考此链接： https://jsfiddle.net/yudizsolutions/1wm7z5y4/