Vertical Align of images in Quarto Presentations

user_3215940 0
Viewed 442

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
quarto r css
1 Answers

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 one empty space and 2nd one with one column.

---
title: "Testing Image valign"
format: revealjs
---

## Image alignment (default)

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

![](test.jpg){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]]"}
![](test.jpg){fig-align="center" height="200"}
:::

default-valign possible-valign

Hope this helps.

user_108583210
Related