Primer CSS Layout Alignment Last Updated : 19 Apr, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report 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 Comment More infoAdvertise with us Next Article Primer CSS Flexbox Align Content V vkash8574 Follow Improve Article Tags : Web Technologies CSS Primer-CSS Primer-CSS Utilities 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 Foundation CSS Menu Item Alignment Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, 2 min read Like