vertical-align

align

Sets vertical-align via --align. E.g. middle, baseline.

CSS Rules

.align {
  vertical-align: var(--align);
}

Usage

<element class="align" style="--align: /* value */;" />

Responsive

Prefix .align utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:align" style="--md-align: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="align:hover" style="--align-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="align:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before align::before" style="--align-before: /* value */;" />

<element class="content-after align::after" style="--align-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style.

<!-- Input -->
<element class="align=value" />

<!-- Output -->
<element class="align" style="--align: value;" />

align-baseline

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

CSS Rules

.align-baseline {
  vertical-align: baseline;
}

Usage

<element class="align-baseline" />

Responsive

Prefix .align-baseline utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:align-baseline" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="align-baseline:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="align-baseline:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before align-baseline::before" />

<element class="content-after align-baseline::after" />

align-top

Aligns the top of the element and its descendants with the top of the entire line.

CSS Rules

.align-top {
  vertical-align: top;
}

Usage

<element class="align-top" />

Responsive

Prefix .align-top utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:align-top" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="align-top:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="align-top:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before align-top::before" />

<element class="content-after align-top::after" />

align-middle

Aligns the middle of the element with the baseline plus half the x-height of the parent.

CSS Rules

.align-middle {
  vertical-align: middle;
}

Usage

<element class="align-middle" />

Responsive

Prefix .align-middle utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:align-middle" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="align-middle:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="align-middle:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before align-middle::before" />

<element class="content-after align-middle::after" />

align-bottom

Aligns the bottom of the element and its descendants with the bottom of the entire line.

CSS Rules

.align-bottom {
  vertical-align: bottom;
}

Usage

<element class="align-bottom" />

Responsive

Prefix .align-bottom utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:align-bottom" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="align-bottom:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="align-bottom:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before align-bottom::before" />

<element class="content-after align-bottom::after" />

align-text-top

Aligns the top of the element with the top of the parent element's font.

CSS Rules

.align-text-top {
  vertical-align: text-top;
}

Usage

<element class="align-text-top" />

Responsive

Prefix .align-text-top utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:align-text-top" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="align-text-top:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="align-text-top:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before align-text-top::before" />

<element class="content-after align-text-top::after" />

align-text-bottom

Aligns the bottom of the element with the bottom of the parent element's font.

CSS Rules

.align-text-bottom {
  vertical-align: text-bottom;
}

Usage

<element class="align-text-bottom" />

Responsive

Prefix .align-text-bottom utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:align-text-bottom" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="align-text-bottom:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="align-text-bottom:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before align-text-bottom::before" />

<element class="content-after align-text-bottom::after" />

align-sub

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

CSS Rules

.align-sub {
  vertical-align: sub;
}

Usage

<element class="align-sub" />

Responsive

Prefix .align-sub utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:align-sub" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="align-sub:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="align-sub:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before align-sub::before" />

<element class="content-after align-sub::after" />

align-super

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

CSS Rules

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

Usage

<element class="align-super" />

Responsive

Prefix .align-super utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:align-super" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="align-super:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="align-super:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before align-super::before" />

<element class="content-after align-super::after" />