Alignment mixins

Vertical alignment utilities for inline and table cell content.

Classes:

• align-baseline/align-top/align-middle/align-bottom: Sets vertical-align

Responsive: each class has an @breakpoint variant (align-top@md).

Generated from the doc blocks in the core source when the site is built, so it always matches the current release of @wovenui/core. Every example is compiled against core during the build; open Compiled CSSunder an example to see its output. Guide: Alignment. The A to Z index lists every public mixin and function.

Source: utilities/_alignment.scss

Mixins

align-baseline align-top align-middle align-bottom

align-baseline mixin

Sets vertical-align to baseline (inline and table cell content).

@mixin align-baseline

Example

.icon {
  @include align-baseline;
}

Compiled CSS

.icon {
  vertical-align: baseline;
}

vertical-align on MDN

See also: align-top, align-middle, align-bottom. Source: utilities/_alignment.scss:27

align-top mixin

Sets vertical-align to top (inline and table cell content).

@mixin align-top

Example

td {
  @include align-top;
}

Compiled CSS

td {
  vertical-align: top;
}

vertical-align on MDN

See also: align-baseline, align-middle, align-bottom. Source: utilities/_alignment.scss:40

align-middle mixin

Sets vertical-align to middle (inline and table cell content).

@mixin align-middle

Example

.avatar {
  @include align-middle;
}

Compiled CSS

.avatar {
  vertical-align: middle;
}

vertical-align on MDN

See also: align-baseline, align-top, align-bottom. Source: utilities/_alignment.scss:53

align-bottom mixin

Sets vertical-align to bottom (inline and table cell content).

@mixin align-bottom

Example

td {
  @include align-bottom;
}

Compiled CSS

td {
  vertical-align: bottom;
}

vertical-align on MDN

See also: align-baseline, align-top, align-middle. Source: utilities/_alignment.scss:66