CODEWITHSUNDEEP
htmlcssquartoreveal.jspresentation
David M. Kaplan
David M. Kaplan

Reputation: 807

Align `.r-stack` of images at the top in quarto revealjs presentation

I am using the Quarto revealjs presentation format. I am using .r-stack to stack a bunch of images on top of each other as so:

---
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%"}
:::

:::

By default .r-stack appears to center the images vertically one on top of the other. I would like instead to have them all aligned at the top, but have been unable to figure out how to do so. I have tried things like :::{.r-stack style="align-items: flex-start;"} or :::{.r-stack style="vertical-align: top;"}, but nothing seems to work.

Does anyone know how to vertically (and horizontally) align items in an .r-stack?

Upvotes: 0

Views: 184

Answers (1)

Nicolai Berk
Nicolai Berk

Reputation: 11

I got rid of .r-stack in the end and resorted to .absolute, like so:

## 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%"}
:::
:::

Upvotes: 0

Related Questions