Not able to center buttons

[dense-set]

Hi. In my website project, I am trying to create a button using Bootstrap and flexboxes:

<a class="btn btn-primary btn-lg" style="display: flex; align-items: center;">
    <span>
        [an iconify icon]
    </span>
    <span>
        [text]
    </span>
</a>

(I am using <span>'s instead of <div>'s since the latter produces messed up HTML when wrapped inside a <p> element (a bug!?).)

This creates something like this:

Now, I want to center this. For this, I tried wrapping it in a <div style="text-align: center;">. But this does nothing.

Any tricks on how I can center it? (I have already Googled, and the above method was what was suggested.)

[cscheid]

(I am using <span>'s instead of <div>'s since the latter produces messed up HTML when wrapped inside a <p> element (a bug!?).)

<p> requires "phrasing elements" as children; <div> is not one of those. You were the one producing invalid HTML: see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p and https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content

[mcanouil]

This is a 100 % HTML question.
There are more appropriate places to ask those questions such as https://stackoverflow.com/questions/tagged/html.
Also, at some point, you need to actually learn HTML/CSS which we can't teach you here.
I strongly suggest you read https://developer.mozilla.org/en-US/ amongst other resources.

In your post you are mixing things you don't seem to understand.
See a working example below.

---
title: "Quarto Playground"
format: html
---

This is a playground for Quarto.

```{=html}
<div style="text-align: center;">
  <a class="btn btn-primary btn-lg">Button text</a>
</div>
```

[dense-set]

Okay, I will ask on SO. However, your example doesn't address what I am looking for; I need the text and the icon to be centered vertically as well.

[mcanouil]

Vertical centering is only possible within a container that has an height, but again this has nothing to do with Quarto.

---
title: "Quarto Playground"
format: html
---

This is a playground for Quarto.

```{=html}
<div style="display: flex; justify-content: center; align-items: center; height: 100px;">
  <a class="btn btn-primary btn-lg">Button text</a>
</div>
```