Primer CSS Layout Alignment

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible.

The layout is used to display the content using particular style. For example - we can change the layout of document by using display, float, alignment, and other utilities.

Primer CSS Alignment Layout is used to set the position of items. We can align the items either horizontally or vertically. In this section, we will align the content vertically. The vertical align property only works on inline or table-cell boxes.

Used Classes:

• .v-align-baseline - This class is used to set the vertical alignment to baseline.
• .v-align-top - This class is used to set the vertical alignment to top.
• .v-align-middle - This class is used to set the vertical alignment to middle.
• .v-align-bottom - This class is used to set the vertical alignment to bottom.
• v-align-text-top - This class is used to adjust the alignment to top of the parent element.
• v-align-text-bottom - This class is used to adjust the alignment to bottom of the parent element.

Syntax:

<div class="d-table">
 <div class="d-table-cell"> ... <div>
 ...
</div>

Example 1:

Output:

👁 Image

Example 2:

Output:

👁 Image

Reference: https://primer.style/product/css-utilities/#alignment