Alignment

Description

Modify an element with one of the utility classes to assist with alignment issues:

  • u-text-center: updates the text alignment of an element to center
  • u-text-right: updates the text alignment of an element to right
  • u-block-center: updates the horizontal alignment of a block element to center
  • u-valign-center: use this class on the container to align items in the middle of the cross axis (top to bottom). This class applies to the parent vertically centers items using Flexbox and the align-items property (N.B. Flexbox is not supported in IE9 and below).
  • u-float-left: floats the element left
  • u-float-right: floats the element right
  • u-clear-both: clears float for both sides

Usage

Usage example

Loren Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed sit amet sollicitudin purus.

.u-block-center
.u-valign-center
.u-float-right
Cleared float