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


:::