I need to place an inline image in a apresentation in Quarto (Revealjs) but every inline image shows displaced a bit upwards:

the code I wrote is:

I want an inline image but I get: ![](images/RStudio_logo.svg){height=30}

I can't find the information in the documentation and I am not proficient in css.

the question is: Is there a way to do it?

CodePudding user response：

You could add in your yaml a css file which looks like this:

styles.css

.center{
  margin: 0!important;
  height: 30px;
}

and add it to your yaml like this:

---
format: revealjs
css: styles.css
---

then you can add it to your image

I want an inline image but I get: ![](https://upload.wikimedia.org/wikipedia/commons/d/d0/RStudio_logo_flat.svg){.center}

Explanation:

The reason why this happens is the internal css-style of quarto. The above written code overwrites the existing style (that was it is necessary to use !important), that looks like this

.reveal img {
  margin: var(--r-block-margin) 0;
}

Therefore, we use an own css style for that image to override that default.