Gotcha: `mx-auto` and Inline Elements

`mx-auto` typically doesn't work for centering `inline` or `inline-block` elements directly in the same way it does for `block` elements. For an element to be centered with `mx-auto`, it generally needs to be a block-level element and have a defined width.

Attempting to center an inline `span` (Incorrect):

Parent with `text-center`: Span with `mx-auto w-32` (still not centered by `mx-auto` itself)

This span is centered due to parent's `text-center`, NOT its own `mx-auto`.

Parent without `text-center`: Span with `mx-auto w-32` (clearly not centered)

Here, the span is not centered because `mx-auto` doesn't apply to inline elements for horizontal centering within their line box this way. The `w-32` also behaves differently for inline vs block.

Corrected: Making the element `block` with a width and `mx-auto`:

This `span` is now `display: block`, has `w-1/2`, and `mx-auto`.
It is correctly centered.

The span above was styled with `block w-1/2 mx-auto`.

Alternative for inline/inline-block: `text-center` on parent

If you want to center actual inline or inline-block elements (like text or buttons side-by-side), apply `text-center` to their block-level parent container.

Inline Item 1

These are centered because their parent `div` has `text-center`.