Mastering layout: why inline-flex buttons do not center and how to fix without regressions

This is a common production bug: the button looks almost centered, but text shifts when width changes, icons are added, or labels wrap.

Root cause

With inline-flex, child alignment is controlled by:

main axis: justify-*
cross axis: items-*

text-center does not distribute flex children on the main axis.

Correct base fix

<button class="inline-flex items-center justify-center gap-2 w-64 px-8 py-3">
  <span>Learn more</span>
</button>

Icon-safe pattern

<button class="inline-flex items-center justify-center gap-2 w-64 px-8 py-3">
  <svg class="h-4 w-4 shrink-0" aria-hidden="true"></svg>
  <span class="leading-none">Continue</span>
</button>

Responsive-safe width strategy

Prefer flexible sizing when labels vary by locale:

<button class="inline-flex items-center justify-center min-w-40 max-w-full px-6 py-3">
  Confirm action
</button>

Debug checklist

verify computed display, justify-content, align-items;
compare behavior with/without fixed width;
test short/long labels;
validate hover/focus states without layout shift.

Final takeaway

If a component uses flex, alignment must be solved on flex axes, not text flow. justify-center + items-center plus icon/width discipline is the reliable fix.

This post is licensed under CC BY-NC.