Vertical Alignment
Adjust the vertical alignment of inlined or table cell content.
Contents
Overview
Give some vertical alignment to elements by manipulating their vertical-align
property.
Note that only items with the following display properties can be vertically aligned:
- inline
- inline-block
- inline-table
- table-cell
The alignments consist of the items in the following list and are also available in responsive variants, in the form .visible-{breakpoint}-{alignment}
. Please refer to how our breakpoint nomenclature is used.
.valign-baseline
.valign-top
.valign-middle
.valign-bottom
.valign-text-top
.valign-text-bottom
Examples
Example with inline elements.
Using table cells.
baseline | top | middle | bottom | text-top | text-bottom |
Slightly more complex uses, such as being able to align items in a row, become quick and easy.
SASS Reference
Variables
The available Customization options, or Sass variables, that can be customized for this grouping of utility classes.
Name | Type | Default | Description |
---|---|---|---|
$enable-utility-valign |
boolean | true |
Enable the generation of the vertical alignment utility classes. |
Mixins
No mixins available.