How to middle-align cells with list-table extension?

[rodrigo-j-goncalves]

Description

With the list-table extension, when I use images and text on the same row, they look misaligned: text is bottom-aligned but the figure seems to be top-aligned.

Is there any way to center vertically the elements (both text and figure)?

So far I found the code I need is vertical-align: middle but I'm not sure exactly where to pass this in the QMD file. I tried with

::: {style="vertical-align:middle"}
list-table code
:::

and

:::{.list-table header-rows=1 style="vertical-align:middle"}
my table code
:::

but it doesn't work.

---

Here's a reproducible example and the rendered version:

---
title: "MRE with the 'list-table' extension"

format: revealjs

filters: 
  - pandoc-ext/list-table
---

## 

:::{.list-table header-rows=1}

* - Figure
  - Some text

* - test Column 1 text
  - test Column 2 text

* - ![Figure 1 is top-aligned?](https://en.wikipedia.org/static/images/icons/wikipedia.png)
  - This text is bottom-aligned
 
* - ![Figure 2 is top-aligned?](https://upload.wikimedia.org/wikipedia/commons/7/72/Times-hotel.jpg){width="40%"}
  - It doesn't look too good with a small image and a longer text


:::

[mcanouil]

Thanks for the reproducible example.
While I'm looking into it:

• list-table is natively supported by Quarto at least from Quarto 1.8, so you don't need the extension.

Important

Accessibility: To improve accessibility, please add alternative text to your screenshots. This helps all users, including those using screen readers, to understand the context of the images. A brief description can make a big difference! See Good Alt Text, Bad Alt Text — Making Your Content Perceivable.

[mcanouil]

In Reveal.js, quarto-figure has a margin-bottom, it's also a div while vertical-align is baseline by default but only applies to inline/text content.
To change alignment of div, you need to make the parent a container with for example, something like: display: flex; align-items: center;

You can use your favourite browser inspect mode to investigate the structure of your HTML to see all this.

You could use a CSS rule to get a somewhat better visual, I tend to use the following.
Note that, It's not really a list-table attribute because, you would need to set it for all cells which is not very practical but possible, see the attributes examples of list-table GitHub README (they are mostly about changing the background, but that's the same thing).

---
title: "MRE with the 'list-table' extension"
format:
  revealjs:
    include-in-header:
      - text: |
          <style>
            .reveal table td {
              vertical-align: middle;

              div.quarto-figure {
                margin-bottom: 0;
                margin-top: auto;
                margin-bottom: auto;
              }

              figure {
                margin: 0;
              }
            }
          </style>
---

## Slide

::: {.list-table header-rows=1}

* - Figure
  - Some text

* - test Column 1 text
  - test Column 2 text

* - ![Figure 1 is top-aligned?](https://en.wikipedia.org/static/images/icons/wikipedia.png)
  - This text is bottom-aligned
 
* - ![Figure 2 is top-aligned?](https://upload.wikimedia.org/wikipedia/commons/7/72/Times-hotel.jpg){width="40%"}
  - It doesn't look too good with a small image and a longer text


:::

[rodrigo-j-goncalves]

@mcanouil can you confirm that I do not need to have the pandoc-ext/list-table filter to use this?

I removed the extension and when I try to use the code you provide, it doesn't show as a table:

Quarto 1.8.27
[✓] Checking environment information...
      Quarto cache location: /home/user00/.cache/quarto
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.6.3: OK
      Dart Sass version 1.87.0: OK
      Deno version 2.3.1: OK
      Typst version 0.13.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.8.27
      Path: /opt/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: v2025.07
      Chromium: 869685

[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: /home/user00/.TinyTeX/bin/x86_64-linux
      Version: 2025

[✓] Checking Chrome Headless....................OK
      Using: Chrome found on system
      Path: /usr/bin/google-chrome
      Source: PATH

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.12.3
      Path: /progs/Python/RG_VirtualEnvironments/VirtEnvRG001_daily/bin/python3
      Jupyter: 5.8.1
      Kernels: python3

[✓] Checking Jupyter engine render....OK

[✓] Checking R installation...........OK
      Version: 4.5.2
      Path: /usr/lib/R
      LibPaths:
        - /home/user00/R/x86_64-pc-linux-gnu-library/4.5
        - /usr/local/lib/R/site-library
        - /usr/lib/R/site-library
        - /usr/lib/R/library
      knitr: 1.50
      rmarkdown: 2.30

[✓] Checking Knitr engine render......OK

[mcanouil]

I apologise, that's actually an early addition in 1.9 (#13528).
So, to have natively you would need to use Quarto 1.9 pre-release.

[rodrigo-j-goncalves]

Thank you, I will try when I update my Quarto.

That being said, I find the misalignment a bit odd. Would it make sense to open a feature request to change the default alignment to 'middle'?

Thanks again for all your work!

[mcanouil]

Theming feature requests are the ones with less traction because it's a matter of tastes.
The team is more likely to work on bugs than theming changes.

(I'm not saying to not open one in the "Feature Requests" discussion category.)

[rodrigo-j-goncalves]

Fair enough.
Thanks a lot @mcanouil !!!