How to vertically align text and inline images in quarto reveal.js

[handerson1332]

Description

If I use the revealjs format in Quarto, the inline images and text are not properly aligned. As you can see, bottomline of the image is at the center of the letters of the text. However, I would like the text to be at the center of the image.
It works perfectly fine in html website/blog format but not in revealjs format.

What is the reason for it and how can how I make it work globally without having to apply CSS locally to every piece of text/image?

---
title: "Untitled"
format: revealjs
---
## Title

![](image.png){width="100"}  Text Text 

[mcanouil]

In the future, make sure your example is reproducible, using the palceholder shortcode or using online image. (without a valid image, the margin is not showing)

---
title: "Untitled"
format: html
---

## Title

![](https://quarto.org/quarto.png){width="100"}  Text Text 

without having to apply CSS locally to every piece of text/image?

Set it globally: https://quarto.org/docs/output-formats/html-basics.html#includes

---
title: "Untitled"
format:
  revealjs:
    include-in-header:
      - text: |
          <style>
          .reveal p img {
              margin: 0;
          }
          </style>
---

## Title

![](https://quarto.org/quarto.png){width="100"}  Text Text 

[handerson1332]

Hello and thank you for your reply.

What I'm trying to do is not to remove the margin, but to have it work the same as in html format, so that the text is vertically aligned to the image center.
What I don't understand is why this is different in reveal.js format because it never has been an issue in html/website format. Is this kind of behavior even wanted in reveal.js format? So I was hoping that there is some kind of build-in global setting in the yaml that can fix it.

[mcanouil]

Reveal.js does not use Bootstrap and has its own CSS.
HTML formats uses Bootstrap by default.

For some features, Quarto adds some CSS rules such as the rules for call-outs.

You asked for a way to set you styling preferences globally and not on each inline images. I provided you with that. Adapt the rule to your own liking (e.g., vertical-align: middle;).

More generally, I suggest to read the documentation on theming:

• https://quarto.org/docs/presentations/revealjs/themes.html
• https://quarto.org/docs/output-formats/html-themes.html

---

When adding screenshots, please be mindful of all users by adding alternative text.
This comment is about all your screenshots (original post and comment).

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.

[handerson1332]

Thank you for the links of the documentation on theming, I will look closer into it and figure out how it works!