vertical-align for inline buttons

Dropping an inline-flex button into a <p> is a common pattern - a copy-email link, an icon badge, a pill tag mid-sentence. The challenge is making it sit flush with the surrounding text instead of floating above or below it.

Toggle the alignment:

Why vertical-align is the right tool

vertical-align controls how an inline or inline-flex element is positioned along the line box it lives in. It only works on elements that participate in an inline formatting context - plain flow text, <span>, <button>, inline-flex wrappers. A <div> with display: block breaks out of that context entirely, which is why the property has no effect there.

The four values worth knowing for inline buttons:

vertical-align: baseline;  /* default - aligns to text baseline, often too low for tall buttons */
vertical-align: middle;    /* centers against the ex-height - good for icon+label combos */
vertical-align: bottom;    /* aligns the button's bottom edge to the line box bottom */
vertical-align: top;       /* aligns the button's top edge to the line box top */

For most icon + label buttons, middle is the right pick. It aligns the element's midpoint to the midpoint of the font's x-height, which visually centers it against lowercase letters - exactly what you want when a button sits inside running prose.

The <div> wrapper trap

A common mistake is wrapping the button in a <div> for layout reasons (a tooltip, a popover anchor, a context provider). A block-level <div> creates its own block formatting context, so vertical-align on anything inside it has no effect on the outer line. The fix is to make the wrapper inline-flex too so it stays in the same inline context as the surrounding text:

/* wrapper is block - vertical-align on button is ignored */
<div className="relative">
  <button className="inline-flex align-middle" />
</div>

/* wrapper is inline-flex - vertical-align works correctly */
<div className="relative inline-flex align-middle">
  <button className="inline-flex" />
</div>

Put vertical-align on the outermost element that still participates in inline flow - not on children inside a flex container, where the property does nothing.