#Vertical Align

These are utility classes to control vertical alignment of elements inside inline or table-box containers.

vertical-align: baseline !important

vertical-align: top !important

vertical-align: middle !important

vertical-align: bottom !important

vertical-align: text-top !important

vertical-align: text-bottom !important

vertical-align: sub !important

vertical-align: super !important

#Examples

Below is a demo of all supported vertical alignment utility classes.

baseline

Set the u-align-baseline class to align the element with baseline vertical alignment.

top

Set the u-align-top class to align the element with top vertical alignment.

middle

Set the u-align-middle class to align the element with middle vertical alignment.

bottom

Set the u-align-bottom class to align the element with bottom vertical alignment.

text-top

Set the u-align-text-top class to align the element with text-top vertical alignment.

text-bottom

Set the u-align-text-bottom class to align the element with text-bottom vertical alignment.

sub

Set the u-align-sub class to align the element with sub vertical alignment.

super

Set the u-align-super class to align the element with super vertical alignment.

#Responsive

⚠ Note that the viewport variants are disabled in the default build of Cirrus. To enable, you must enable it yourself in _configs.scss and create a custom build or enable it in the config in your Sass project.

//_configs.scss
$config: (
    viewports: (
        flags.$VERTICAL-ALIGN: true,
    )
) !default;

To use the viewport variant of a given class, you just need to suffix each class with a viewport selector. For example, if I only want u-align-inherit to be applied to some element for lg and above, then I would use the u-align-inherit-lg class.

<div class="u-align-inherit-lg">
    <!-- ... -->
</div>

For more information, visit the Viewports documentation.

#Variants

The classes specified above are the default utility classes for setting vertical alignment. You can add, change, or remove classes within the _config.scss file of Cirrus.

// _config.scss
$config: (
    extend: (
        vertical-align: (
            inherit
        )
    )
) !default;

This would generate the following class.

.u-align-inherit {
    vertical-align: inherit !important;
}

Learn more about how to extend Cirrus to support your use cases in the Configuration documentation.