四开演示文稿中图像的垂直对齐

Question

我正在使用

revealjs

格式的四开演示文稿。 我可以像这样将图像设置为水平居中

![](img/path_to_img.svg){fig-align="center" height="200"}

我试图让图形垂直居中对齐，但我找不到方法。 如果我尝试通过将类更改为

.center

来调整幻灯片的 CSS，它确实会垂直居中内容，但它会居中 所有 内容，而不仅仅是图像。

如何使图像垂直居中？

我尝试过的事情：

• 添加

  style="padding-top: 150px;

  有助于使其居中，但令人眼花缭乱
• 添加

  vertical-align: middle;

  似乎不起作用

Answer 1

您可以在图像的上方和下方创建一些空间，使其看起来像 v 对齐，为此，您需要使用

layout

，如下所示。

这里

layout="[[-1], [1], [-1]]"

翻译成，

创建三行，其中第一行和第三行为空白，第二行为一列。

请参阅四开文档中的此处，了解有关布局的更多信息。

---
title: "Vertical align"
format: revealjs
---


## Image alignment (Default)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus ultrices
leo sit amet accumsan.

![](https://placeholder.pics/svg/200){fig-align="center" height=200}


## Vertically Aligned 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus ultrices
leo sit amet accumsan.

::: {layout="[[-1], [1], [-1]]"}

![](https://placeholder.pics/svg/200){fig-align="center"}

:::

---

---