In revelajs, how to align h2 when the text has a padding and a backgorund color (like a text-box)

[ManuelSpinola]

When I use the h2 with background color (like a text box) and use de css display: inline, the "text-box" autoamtically justify to the left. How can I keep everything centered, the text and the "text-box".

.reveal section h2 {
color: #fff;
padding: 5px;
border-radius: 10px;
background-color: DodgerBlue;
text-align: center;
font-size: 1em;
display: inline;
}

[mcanouil]

Please could you format your post?

Also, could you share a small "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? Thanks.

You can share a Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).

````qmd
---
title: "Reproducible Quarto Document"
format: html
---

This is a reproducible Quarto document using `format: html`.
It is written in Markdown and contains embedded R code.
When you run the code, it will produce a plot.

```{r}
plot(cars)
```

The end.
````

[ManuelSpinola]

---
title: "Reproducible Quarto Document"
format:
  revealjs: 
    theme: [default, my_theme]
    self-contained: true
    slide-number: true

---

## Introduction

My question is regarding to the html formatting of the h2

This is my scss (my_theme)

.reveal section h2 {
color: #fff;
padding: 5px;
border-radius: 10px;
background-color: DodgerBlue;
text-align: center;
font-size: 1em;
display: inline;
}

[mcanouil]

Because of the various display: block, either you learn to tweedle with CSS until your figure out the proper cascade (not 100 % sure it's actually possible here, since I believe you want the background to only appear under the text).

Quarto document	HTML
--- title: "Reproducible Quarto Document" format: revealjs include-in-header: - text: | <style> .text-box { color: #fff; padding: 5px; border-radius: 10px; background-color: DodgerBlue; font-size: 1em; } .reveal .slides section h2 { text-align: center; } </style> --- ## [Introduction]{.text-box} {{< lipsum 1 >}}

[ManuelSpinola]

Thank you very much. I will try also to figure it out with CSS.