Right way to center a group of elements

[oliveratgithub]

Hi there,
what's the correct and suggested way to center a grouped element like the Button Group?

[claviska]

The button group is display: inline-block by default, so this works:

<div style="text-align: center; border: dashed 2px silver;">
  <sl-button-group>
    <sl-button type="primary">Left</sl-button>
    <sl-button type="primary">Center</sl-button>
    <sl-button type="primary">Right</sl-button>
  </sl-button-group>
</div>

Another approach using flexbox:

<div style="display: flex; flex-direction: column; align-items: center; border: dashed 2px silver;">
  <sl-button-group>
    <sl-button type="primary">Left</sl-button>
    <sl-button type="primary">Center</sl-button>
    <sl-button type="primary">Right</sl-button>
  </sl-button-group>
</div>

[oliveratgithub]

Thanks. I thought it's achievable by styling the <sl-button-group> directly using a class…

[claviska]

If you want to make the button group block-level, you can do this. Personally, I think it's easier to do it on a container so later on you can add/remove things and everything remains centered.

sl-button-group {
  display: block;
  outline: dashed 2px silver;
}

sl-button-group::part(base) {
  justify-content: center; 
}

[oliveratgithub]

Oh I see, thanks for this addition. And sorry for the utterly basic questions – I just tried to wrap my head around how to do it the "the shoelace way" before using regular blocks and styling. Got the hang of it now & understand to treat sl-elements like other block elements 🤓👍