Center inline elements with text-align

Quick implementation

/* Centers text and inline/inline-block children */
.text-center {
  text-align: center;
}

/* Make block elements inline-block to center them */
.text-center .block-item {
  display: inline-block;
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer explaining classic CSS centering patterns.

Goal: Center inline and inline-block elements within a container using
text-align: center — the simplest centering technique for text, icons,
badges, and groups of inline buttons.

Technical constraints:
- Apply text-align: center to the block container.
- text-align is an inherited property — all inline descendants inherit
  it unless overridden. Document this cascade behaviour.
- Block-level children (display: block with explicit width) are NOT
  centered by text-align — use margin: 0 auto for those instead.
- To center a block element with text-align, change it to
  display: inline-block; the parent's text-align then applies.
- Use oklch() for any color values — no hex or rgba.
- No JavaScript required.

Framework variant (pick one):
A) Vanilla CSS utility class .text-center, plus a companion
   .block-item modifier that sets display: inline-block to opt
   block children into the centering.
B) React component — TextCenter wraps children in a div with
   textAlign: 'center' applied as an inline style; accepts a
   className prop to merge additional styles.

Edge cases to handle:
- Avoid centering long passages of body text — centered paragraphs
  are harder to read. Limit usage to headings, labels, and short UI
  elements.
- When centering a group of inline-block buttons, add a small gap
  between them using margin or an inline-flex wrapper so they do not
  collide.
- text-align: center does not affect absolutely positioned children —
  those need their own centering via transform or inset.
- The property is inherited, so a nested container may unexpectedly
  inherit centering from a parent. Override with text-align: start
  (or left) as needed.

Return CSS only (or a React component if variant B is chosen).

When text-align: center is still the right answer

Modern developers often reach for flexbox or grid for any centering task, but text-align: center remains the semantically correct and most efficient tool for centering text content, inline icons, and groups of inline UI elements. It requires a single declaration on the container, has no layout side effects, and cascades to all inline descendants automatically.

The key insight is what text-align affects: it applies to inline formatting contexts. Any child that participates in inline flow — text nodes, <span>, <a>, <img>, <button>, and elements with display: inline-block — will be centered. Block-level children with explicit widths are not affected because they live in a block formatting context where text-align has no influence on their horizontal position.

The practical boundary: use text-align: center for hero headings, section labels, badge groups, and call-to-action button rows. Use margin: 0 auto for block-level boxes like centered article columns or centered cards with fixed widths. Use flexbox when you need to center a group of block items or need alignment on both axes.

Inheritance and cascade considerations

text-align is an inherited CSS property. This means setting it on a container affects all descendants that do not override it. In most cases this is a convenience — a centered card container automatically centers all its text. But in complex component trees, unexpected inheritance can cause readability issues if nested sections of body text accidentally become centered.

The safest pattern is to apply text-align: center at the most specific level needed and add explicit text-align: start resets on any descendant containers that hold running prose. The CSS logical property text-align: start (rather than text-align: left) correctly aligns to the start of the writing direction in both LTR and RTL documents.

When centering a group of inline-block buttons, be aware that the buttons themselves inherit text-align: center, which centers the text label inside each button. This is usually the desired behavior. If a button has left-aligned text by design, apply text-align: start directly on the button element to override.

Making block elements center with inline-block

A common pattern is centering a block element — a badge, a styled box, a constrained-width wrapper — using text-align on its parent. Because text-align does not affect block-level elements, the trick is to change the child to display: inline-block. The element retains its box model (padding, border, explicit dimensions) but now participates in the inline flow of the parent, making it subject to text-align: center.

The trade-off: an inline-block element cannot have a sibling on a new block line without explicit line breaks or wrapping. If you need the element to stretch to full container width on its own line, keep it as a block and use margin: 0 auto instead. For elements that should fit their content width and sit centered on a line, display: inline-block combined with a parent text-align: center is a clean and well-supported solution.