Primer CSS Layout Alignment
Last Updated :
19 Apr, 2022
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:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Primer CSS Layout Alignment</title>
<link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
rel="stylesheet" />
</head>
<body>
<div class="text-center">
<h1 class="color-fg-open">
GeeksforGeeks
</h1>
<h3>Primer CSS Layout Alignment</h3>
<div class="d-table border color-border-success-emphasis">
<div class="d-table-cell"><h1>GeeksforGeeks</h1></div>
<div class="d-table-cell v-align-baseline">
Vertical Align Baseline
</div>
<div class="d-table-cell v-align-top">
Vertical Align Top
</div>
<div class="d-table-cell v-align-middle">
Vertical Align Middle
</div>
<div class="d-table-cell v-align-bottom">
Vertical Align Bottom
</div>
</div>
</div>
</body>
</html>
Output:
Example 2:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Primer CSS Layout Alignment</title>
<link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
rel="stylesheet" />
</head>
<body>
<div class="text-center">
<h1 class="color-fg-open">
GeeksforGeeks
</h1>
<h3>Primer CSS Layout Alignment</h3>
<div class="border color-border-success-emphasis">
<h1>GeeksforGeeks
<span class="f4 v-align-text-top">
Vertical Align Text Top
</span>
<span class="f4 v-align-text-bottom">
Vertical Align Text Bottom
</span>
</h1>
</div>
</div>
</body>
</html>
Output:
Reference: https://primer.style/css/utilities/layout#alignment
Similar Reads
Primer CSS Layout Primer CSS is a free and open-source CSS framework. It is built upon the systems that create the foundation of the basic style elements such as spacing, typography, and color. Created with GitHub’s design system, it is highly reusable and flexible.Primer CSS Layout is used to change the document lay
2 min read
Primer CSS Flexbox Align Content 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. Primer CSS Flexbox Align Content is u
4 min read
Primer CSS Tooltip 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
3 min read
Primer CSS Layout Column Gutter Primer CSS is a free and open-source CSS framework that is built using the GitHub design system for providing support to the broad spectrum of GitHub websites. It helps in creating the foundation of the basic style elements such as spacing, components, typography, color, etc. Primer CSS Gutter style
3 min read
Primer CSS Flexbox Align Items 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. Primer CSS Flexbox Align Items used t
3 min read