Understanding `mx-auto` Gotchas

Gotcha 1: `mx-auto` Without Defined Width

The `div` below has `mx-auto` but no specific `w-*` or `max-w-*` class. By default, block elements like `div` take up the full available width of their parent. While `mx-auto` sets left and right margins to 'auto', if the element is already full-width, there's no space to distribute, so it won't appear centered.

I am a `div` with `mx-auto` but no defined width (e.g., `w-1/2`, `max-w-md`). I will span the full width.

Key: `mx-auto` needs a defined width on a block-level element to have a centering effect.

Corrected: `mx-auto` With Defined Width

This `div` has both `mx-auto` and a defined width (`w-3/4`). Now it centers as expected.

I am a `div` with `w-3/4` and `mx-auto`. I am centered!

Gotcha 2: `mx-auto` on Inline Elements

The ` ` element below is `display: inline` by default. `mx-auto` does not center `inline` elements because they flow with content and don't have their own "block" boundaries that margins can adjust for centering in the same way as block elements.

Surrounding text. I am a `span` (inline) with `mx-auto`. I won't center effectively. More surrounding text.

To center an element like a `span` using `mx-auto`: You must change its display property to `block` (or `inline-block` if appropriate, though `mx-auto` for centering usually implies `display:block`) AND give it a defined width.

Example of fixing the inline `span`:

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

Alternatively, to center inline content (like text or an inline `span`) *within* its parent block element, use `text-center` on the parent.

This span is centered via `text-center` on its parent.