在 quarto Revealjs 演示文稿中将图像的“.r-stack”对齐到顶部

Question

我正在使用 Quarto Revealjs 演示文稿格式。我正在使用

.r-stack

将一堆图像堆叠在一起，如下所示：

---
format: revealjs
---


## My slide

:::{.r-stack}

:::{.fragment .fade-in-then-out style="text-align: center"}
**Image 1 title**

![](https://static.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg){width="30%"}
:::

:::{.fragment .fade-in style="text-align: center"}
**Image 2 title**

![](https://static.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg){width="50%"}
:::

:::

默认情况下，

.r-stack

似乎将图像垂直居中，一个在另一个之上。我想让它们全部在顶部对齐，但一直无法弄清楚如何做到这一点。我尝试过类似

:::{.r-stack style="align-items: flex-start;"}

或

:::{.r-stack style="vertical-align: top;"}

之类的方法，但似乎没有任何效果。

有人知道如何垂直（和水平）对齐

.r-stack

中的项目吗？

Answer 1

我最终摆脱了 .r-stack 并求助于 .absolute，如下所示：

## My slide

:::{.fragment .fade-in-then-out}
:::{.absolute top=200 left=50}
**Image 1 title**

![](https://static.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg){width="30%"}
:::
:::

:::{.fragment .fade-in}
:::{.absolute top=200 left=50}
**Image 2 title**

![](https://static.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg){width="50%"}
:::
:::