Center figure in tabset in revealjs

[rressler]

I am trying to center .png images in a panel-tabset on a slide and the images are always left aligned. I have tried using a {.fig-align="center"} after the image but it seems to be ignored. Do I need to create a new class and use important to override the panel class alignment?
Thanks
Richard

[mcanouil]

To quote myself from #3608

Depending on what you want to be centered: #1386 and/or #2951 might be of interest.

.fig-align="center" does not exist.
fig-align is a code cell yaml option.
Using an equal sign in HTML means you are defining the attribute .fig-align which no meaning and does not exist in HTML. It is not ignored, if you look at the HTML code you'll see a data-fig-align="center" in the figure/img HTML tag, but as I said since it has no meaning in plain HTML (you can use JavaScript to target this), nothing happens.

PS: try to use the search engine first 😉

[cderv]

fig-align is a code cell yaml option.

fig-align is also an attribute you can set on Images and that we handle https://quarto.org/docs/authoring/figures.html#figure-alignment

[mcanouil]

Oh, I missed that. 🤦‍♂️

Thus it should work but without the leading dot.

[RoyiAvital]

@cderv , Is there a combination to center the figure both vertically and horizontally?

[mcanouil]

@RoyiAvital See #2951 (reply in thread)

[cderv]

@rressler this should work, isn't it ?

---
format: revealjs
---

## Slide 1

::: {.panel-tabset}

### Tab A

![](https://quarto.org/quarto.png){fig-align=center}

### Tab B

Content for `Tab B`

:::

As show in doc (https://quarto.org/docs/authoring/figures.html#figure-alignment), it is fig-align: center and not with a . which is a class and not an attribute as mentioned in other answer.

[rressler]

Thanks Christophe and Mickael. I turned out to be simpler. I had three figures – two on the first line and one on the second. I needed to add a blank line between the images or the fig-align does not matter as it is trying to fill all three on one line and running over- so you can’t see any centering. I see the examples in the guide show a blank line between the pictures so I should have picked up on that. I did search for my issue but did not find anything specific to revealjs so II did not see the solutions about text and columns. That will be helpful in the future I am sure. Thanks, Richard From: Mickaël Canouil ***@***.***> Date: Monday, February 6, 2023 at 8:09 AM To: quarto-dev/quarto-cli ***@***.***> Cc: Richard Ressler ***@***.***>, Mention ***@***.***> Subject: Re: [quarto-dev/quarto-cli] Center figure in tabset in revealjs (Discussion #4239) External Email: Use caution with links and attachments. Oh, I missed that. 🤦‍♂️ Thus it should work but without the leading dot. — Reply to this email directly, view it on GitHub<https://urldefense.com/v3/__https:/github.com/quarto-dev/quarto-cli/discussions/4239*discussioncomment-4882237__;Iw!!IaT_gp1N!wamAz8X1XGRTgHJLbNcTIcg-Y0FsnySboE_PsjeKbXab3uZnf_r7drIbRR8YGx8B-G1e2fRiYgQndCXMpVsFJJxXz60$>, or unsubscribe<https://urldefense.com/v3/__https:/github.com/notifications/unsubscribe-auth/AOCMN3JGNFORZ6QJ27LZEZLWWDZXXANCNFSM6AAAAAAUSGB55Y__;!!IaT_gp1N!wamAz8X1XGRTgHJLbNcTIcg-Y0FsnySboE_PsjeKbXab3uZnf_r7drIbRR8YGx8B-G1e2fRiYgQndCXMpVsF3I7zReg$>. You are receiving this because you were mentioned.Message ID: ***@***.***>