Align

Content

When you need to horizontally align inline or flex elements within a container, you can use the u-align utilities to force them to align center, left or right.

Text

If you only need text to be aligned, you can use the u-align-text utilities.

Vertical alignment New

If you need to vertically align inline elements to the middle of their container, you can use the u-vertical-align--middle utility.

Import

To import just this utility into your project, copy the snippet below and include it in your main Sass file.

// import Vanilla and include base mixins
// this only needs to happen once in a given project
@import 'vanilla-framework';
@include vf-base;

@include vf-u-align;

For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.