如何使SVG图片与文本内容显示在同一行？

要让SVG（或图片）和文本在同一行显示，核心是确保元素的布局属性适配行内流，以下是具体方案：

• 核心调整思路：默认图片元素为inline-block，但若父容器或相邻元素存在块级样式，可能触发换行。通过将包裹图片的容器设置为行内类属性，就能让它和文本处于同一行布局中。

• 优化后的React代码示例：

<h1 className="text-8xl text-center text-white font-extrabold mb-10">
  Take Your Ne
  <span style={{ display: "inline-block", verticalAlign: "middle" }}>
    <img src={xLetter.src} alt="X" style={{ height: "1em", width: "auto" }} />
  </span>
  t Adventure To The Extreme
</h1>

• 关键细节补充：
  • 用inline-block替代inline作为容器样式，更方便后续调整对齐和间距
  • 添加verticalAlign: "middle"让图片和文本垂直居中对齐，避免视觉错位
  • 给图片设置height: "1em"，让图片尺寸与当前文本字号匹配，保证视觉协调

若使用Tailwind CSS，可直接用类名简化代码，比如将<span>的行内样式替换为className="inline-block align-middle"。

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