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>