如何将Spinner SVG图像垂直居中对齐到行中间？

别担心，这个问题很常见，我给你几个简单有效的解决方案，保证让你的Spinner精准居中：

方法一：用vertical-align属性（最直接） #

行内元素默认是沿着基线对齐的，这就是你的Spinner偏左上的核心原因。只需要给SVG加上vertical-align: middle;，就能让它和行内的文本/元素完美垂直居中对齐：

行内样式写法 #

<span>正在加载...</span>
<svg style="vertical-align: middle;" width="20" height="20" viewBox="0 0 20 20">
  <!-- 这里放你的Spinner SVG路径代码 -->
</svg>

CSS类写法（更易维护） #

先定义通用CSS类：

.spinner-icon {
  vertical-align: middle;
}

然后在HTML里引用：

<span>正在加载...</span>
<svg class="spinner-icon" width="20" height="20" viewBox="0 0 20 20">
  <!-- Spinner路径代码 -->
</svg>

方法二：用Flex布局（适合复杂容器场景） #

如果你的Spinner是和其他元素组合放在一个容器里，给容器设置Flex布局可以一次性搞定所有元素的垂直居中，还能灵活控制元素间距：

.loading-wrapper {
  display: flex;
  align-items: center; /* 实现垂直居中 */
  gap: 6px; /* 可选：给文本和Spinner之间加一点间距，视觉更舒服 */
}

<div class="loading-wrapper">
  <span>正在加载...</span>
  <svg width="20" height="20" viewBox="0 0 20 20">
    <!-- Spinner路径代码 -->
  </svg>
</div>

额外小提示：检查SVG的ViewBox #

如果用了上面的方法还是觉得视觉上不对，可能是SVG本身的视口设置有问题。确保你的SVG的viewBox属性准确包裹了Spinner图形，没有多余的空白区域。比如如果Spinner是从(0,0)到(20,20)的图形，那viewBox="0 0 20 20"就没问题，这样SVG的实际内容和容器尺寸匹配，对齐效果会更精准。

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