Hugo主题中SVG与段落对齐问题求助

步骤1：调整HTML结构 #

把Instagram图标放到版权文本所在的<p>标签内，让它们处于同一容器，才能实现横向对齐：

<footer class="footer p-2">
  <p class="m-b-s">
    {{ .Site.Title }}&nbsp;&amp;copy {{ now.Format "2006"}}
    <a href="你的Instagram主页链接" class="instagram-link">
      {{ partial "icons/instagram-logo.svg" . }}
    </a>
  </p>
</footer>

步骤2：添加CSS样式 #

通过自定义CSS实现垂直对齐和左内边距：

/* 控制图标链接的布局与间距 */
.instagram-link {
  display: inline-block;
  vertical-align: middle; /* 和文本垂直居中对齐 */
  margin-left: 0.8rem; /* 左内边距，数值可按需调整 */
}

/* 可选：调整SVG图标尺寸，适配文本大小 */
.instagram-link svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: currentColor; /* 继承文本颜色，保持主题风格统一 */
}

样式添加方式 #

• 如果你有自定义CSS文件（比如主题目录下的assets/css/custom.css），直接把上述代码粘贴进去即可。
• 也可以在layouts/partials/custom-head.html中添加<style>标签，把CSS代码放进去。

为什么之前的设置无效？ #

之前的代码里，图标是单独的<a>标签，默认会和<p>标签上下排列（块级布局），所以无法和文本横向对齐；就算用<span>包裹，只要结构上不在同一容器，样式也无法生效。

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