Alignment

Alignment utilities set vertical-align: where an inline element sits on its line of text, and where content sits inside a table cell. Use them to line up an icon with the text next to it, or to pin cell content to the top of a tall table row.

How alignment works

One class per value. align-baseline, align-top, align-middle and align-bottom each set one vertical-align value. There is no configuration map and no token.
Inline and table cells only. vertical-align applies to inline, inline-block and table cell boxes. It has no effect on a block, flex or grid item.
Not flex or grid alignment. To align children of a flex container, use the cross axis classes on the Flex page (x-center); for grid items, see Item alignment. Horizontal text alignment (text-start, text-center) is on the Typography page.

Class	Declaration	Inline content	Table cell
`align-baseline`	`vertical-align: baseline`	Baseline on the parent’s baseline (the default)	Cell content on the row’s baseline
`align-top`	`vertical-align: top`	Top on the top of the line box	Content at the top of the cell
`align-middle`	`vertical-align: middle`	Middle on the parent’s baseline plus half its x-height	Content centred in the cell
`align-bottom`	`vertical-align: bottom`	Bottom on the bottom of the line box	Content at the bottom of the cell

Inline content

Each square below is an inline-block placed in a line of larger text. The class moves it relative to that line.

Text baseline top middle bottom

HTML
SCSS

<p class="text-2xl">
  Text <span class="inline-block w-6 h-6 bg-brand rounded align-baseline"></span> baseline
  <span class="inline-block w-6 h-6 bg-brand rounded align-top"></span> top
  <span class="inline-block w-6 h-6 bg-brand rounded align-middle"></span> middle
  <span class="inline-block w-6 h-6 bg-brand rounded align-bottom"></span> bottom
</p>

.icon {
  @include apply(inline-block, align-middle);
}

align-middle is the usual choice for an icon or avatar next to a label. Images, SVG and other replaced elements are reset to display: block by core, so add inline-block (or inline) before an alignment class has any effect on them.

NuvoUI: an image aligned with align-middle

<p>
  <img class="inline-block w-8 h-8 align-middle" src="/images/logo.svg" alt="" />
  NuvoUI: an image aligned with align-middle
</p>

Table cells

In a table cell, the class places the content within the row height. Cells default to middle in most browsers.

A cell with several lines of text sets the height of the whole row, so the other cells have room to show their alignment.

align-top

align-middle

align-bottom

HTML
SCSS

<table class="w-full">
  <tbody>
    <tr>
      <td class="p-2 border">A cell with several lines of text sets the height of the whole row, so the other cells have room to show their alignment.</td>
      <td class="p-2 border align-top">align-top</td>
      <td class="p-2 border align-middle">align-middle</td>
      <td class="p-2 border align-bottom">align-bottom</td>
    </tr>
  </tbody>
</table>

.data-table td {
  @include apply(align-top);
}

align-top on every cell of a data table keeps the first line of each cell on one level when rows hold text of different lengths.

Responsive variants

Every alignment class has a responsive variant with an @{breakpoint} suffix. Variants apply from their breakpoint upwards.

Resize the window align-top align-middle@md

HTML
SCSS

<p class="text-2xl">
  Resize the window <span class="inline-block w-6 h-6 bg-brand rounded align-top align-middle@md"></span> align-top align-middle@md
</p>

.icon {
  @include apply(align-top, align-middle md);
}

Suffix	Media query
`@xs`	`@media (min-width: 480px)`
`@sm`	`@media (min-width: 640px)`
`@md`	`@media (min-width: 768px)`
`@lg`	`@media (min-width: 1024px)`
`@xl`	`@media (min-width: 1280px)`
`@2xl`	`@media (min-width: 1536px)`

There are no state classes such as hover:align-top. The mixins accept state modifiers inside apply().

SCSS

Every class has a mixin of the same name. The mixins take no arguments.

@use "@nuvoui/core" as *;

.avatar {
  @include apply(inline-block, align-middle, align-top md);
}

.avatar {
  display: inline-block;
  vertical-align: middle;
}
@media (min-width: 768px) {
  .avatar {
    vertical-align: top;
  }
}

Mixin	Output
`align-baseline`	`vertical-align: baseline`
`align-top`	`vertical-align: top`
`align-middle`	`vertical-align: middle`
`align-bottom`	`vertical-align: bottom`

Other vertical-align values (text-top, text-bottom, sub, super, a length) have no class or mixin; write the property yourself.

.footnote-ref {
  vertical-align: super;
}

Configuration

Alignment has no configuration map. The alignments feature flag turns the classes off; the mixins stay available.

@use "@nuvoui/core" with (
  $generate-utility-classes: true,
  $feature-flags: ("alignments": false)
);

Errors

A name that is not one of the four alignment mixins raises an error inside apply():

Input	Error
`apply(align-center)`	`Mixin not found: align-center`

// error
.icon {
  @include apply(align-center);
}

Class reference

Generated from the compiled core build. Responsive variants are not listed.

Vertical alignment (4 rules)

Selector	Declarations	Default value
`.align-baseline`	`vertical-align: baseline`	`baseline`
`.align-top`	`vertical-align: top`	`top`
`.align-middle`	`vertical-align: middle`	`middle`
`.align-bottom`	`vertical-align: bottom`	`bottom`

Accessibility and RTL

Alignment is visual only. vertical-align does not change reading order or the accessibility tree. A decorative icon next to a label still needs aria-hidden="true" or an empty alt, and an icon that carries meaning needs a text alternative.
Text zoom. align-middle positions relative to the parent’s x-height, so an icon stays centred on the text when the user enlarges the font size.
RTL. vertical-align works on the block axis and does not depend on text direction.