align-baseline/middle/top/bottom/text-top/text-bottom for inline & table cells. This family contains 8 generated classes in Nakshora 3.1.

Classes#

ClassGenerated CSS
align-baselinevertical-align: baseline;
align-topvertical-align: top;
align-middlevertical-align: middle;
align-bottomvertical-align: bottom;
align-text-topvertical-align: text-top;
align-text-bottomvertical-align: text-bottom;
align-subvertical-align: sub;
align-supervertical-align: super;

Example#

example
html
<img class="align-middle inline-block h-5 w-5" src="i.svg" alt="" /> inline

Responsive & variants#

Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.

Best practices#

  • align-middle fixes icon-vs-text jank

colors/index|Text color · utilities/typography/font-size|Font size