Vertical Align of images in Quarto Presentations

Question

I am using quarto presentations with revealjs format. I have no problem setting images to be horizontally centered like so

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

I am trying to get the figure vertically aligned to center but I can't find a way to. If I try to tweak the css of the slide by changing the class to .center, it does center the content vertically, but it centers all content and not just the image.

How do I vertically center the image?

Things I have tried:

• adding style="padding-top: 150px; helps to kinda center it, but it's eye-balling
• adding vertical-align: middle; does not seem to work

Boanerges

Using absolute positioning could be a solution here: quarto.org/docs/presentations/revealjs/… – Kawai

@Kawai Indeed, very similar solution to my padding-top, I wonder why this is the most straight-forward solution from quarto docs rather than having a proper middle alignment (it's probably because I don't understand what's going on in the background enough). – Boanerges

I think there is no such middle alignment feature because revealjs does not have that built-in. You can open a feature request to have a more built in way to do that probably. We have a default of stretching the image to fill the available space though (quarto.org/docs/presentations/revealjs/advanced.html#stretch) which make the image center on the slide obviously – Kawai

Answer 1

You can create some space above and below of the image, so that it looks like a v-align and to do that you need to use layout as following.

Here layout="[[-1], [1], [-1]]" translates to,

create three rows with 1st and 3rd row as empty space and 2nd row with one column.

See here in the quarto docs to know more about Layouts.

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

:::

---

---

Hondo

This is an option, though {.absolute top=50 right=50 width="450" height="250"} sounds like something I can play with easier than making layouts – Boanerges