Quarto（Revealjs）演示文稿内联图片上移问题解决方法咨询

以下是几种简单可行的解决方法，无需精通CSS即可操作：

• 方法一：单独调整单张图片
  修改你的图片代码，添加垂直居中的样式属性，直接让图片和文本对齐：

  I want an inline image but I get: ![](images/RStudio_logo.svg){height=30 style="vertical-align: middle;"}
  

• 方法二：全局统一设置所有内联图片
  如果需要所有内联图片都自动对齐，先在Quarto文档的YAML配置中指定自定义CSS文件：

  format:
    revealjs:
      css: custom.css
  

  接着在同目录下创建custom.css文件，写入以下内容：

  /* 让所有段落内的图片垂直居中 */
  .reveal p img {
    vertical-align: middle;
  }
  

  之后所有段落里的内联图片都会自动垂直居中，无需逐个设置。

• 方法三：内嵌样式（无需额外文件）
  不想新建CSS文件的话，直接在Quarto文档开头添加一个样式块即可：

  <style>
  .reveal p img {
    vertical-align: middle;
  }
  </style>
  

  效果和方法二一致，全局生效。

原理：Revealjs默认的图片垂直对齐方式是baseline（基线对齐），这会导致图片和文本基线对齐时出现向上偏移的视觉效果，改成middle就能让图片中心和文本中心对齐，解决偏移问题。

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