Alignment Utilities

NuvoUI provides utilities for controlling the vertical alignment of inline, inline-block, inline-table, and table-cell elements.

Configuration

The alignment utilities are controlled by feature flags:

Basic Usage

Apply vertical alignment to inline elements:

Available Utilities

Baseline Alignment

Aligns the baseline of the element with the baseline of its parent.

Top Alignment

Aligns the top of the element with the top of the tallest element on the line.

Middle Alignment

Aligns the middle of the element with the middle of the parent.

Bottom Alignment

Aligns the bottom of the element with the bottom of the entire line.

SCSS Mixins

Use alignment mixins in your SCSS:

Responsive Variants

All alignment utilities support responsive breakpoints:

Common Patterns

Icons with Text

Align icons properly with text:

Form Elements

Align form elements with labels:

Inline Images

Align images within text:

Table Cells

Vertical alignment in table cells:

Badge Alignment

Align badges and labels with text:

Use Cases

When to Use Each Alignment

• align-baseline: Default alignment for most inline text elements
• align-top: Useful for superscript-like positioning or aligning with the tallest element
• align-middle: Perfect for centering icons, images, and form controls with text
• align-bottom: Useful for subscript-like positioning or bottom-aligning elements

Browser Compatibility

Vertical alignment is well-supported across all modern browsers and works with:

• Inline elements (span, a, strong, etc.)
• Inline-block elements
• Inline-table elements
• Table-cell elements (td, th)

Note: Vertical alignment does not work on block-level elements. For those, use flexbox or grid alignment utilities.

API Reference

Class	Mixin	Description	CSS Property
.align-baseline	align-baseline()	Align to baseline	vertical-align: baseline
.align-top	align-top()	Align to top	vertical-align: top
.align-middle	align-middle()	Align to middle	vertical-align: middle
.align-bottom	align-bottom()	Align to bottom	vertical-align: bottom

All alignment classes support responsive variants with @breakpoint syntax.