Bootstrap中如何使SVG尺寸与文本尺寸同步？

要让SVG和<h1>中的文本尺寸匹配并对齐，你可以通过以下几种简单方法实现：

方法1：直接给SVG添加宽高与对齐样式 #

利用相对单位（比如em）设置SVG的width和height，同时添加垂直对齐样式，让它和文本居中对齐：

<h1>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width="1em" height="1em" style="vertical-align: middle;">
    <path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"/>
  </svg>
  Contact us
</h1>

方法2：用CSS类统一控制 #

如果需要多个SVG和文本对齐，可以定义一个CSS类，避免重复编写样式：

.icon-text-align {
  width: 1em;
  height: 1em;
  vertical-align: middle;
  margin-right: 0.5em; /* 可选：给图标和文本添加间距 */
}

然后在HTML中调用该类：

<h1>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" class="icon-text-align">
    <!-- 原SVG路径内容 -->
  </svg>
  Contact us
</h1>

关键原理 #

你的SVG已经包含viewBox="0 0 640 512"属性，这意味着SVG可以根据设置的宽高自动缩放且不会变形。使用em作为单位的好处是，它会跟随父元素（这里是<h1>）的字体大小变化，始终保持和文本尺寸匹配。vertical-align: middle则确保图标和文本在垂直方向上居中对齐，避免出现偏移。

内容的提问来源于stack exchange，提问作者feefewfgwtg