Blaze UI Utility for Alignment Centered

Last Updated : 20 Apr, 2022

Blaze UI is a free open source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and efficiently with a consistent style.

In this article, we will learn the centered alignment for text contents utility for both vertical and horizontal directions.

Blaze UI alignment centered classes:

u-center-block: This class is used to set the HTML div as a centered block.
u-center-block__content: This class is used to set the content of the HTML div as a centered block.
u-center-block__content–vertical: This class is used to set the vertical alignment of content as a centered block.
u-center-block__content–horizontal: This class is used to set the horizontal alignment of content as a centered block.

Syntax:

<div  class="u-center-block">                   
    <div class="u-center-block__content 
        u-center-block__content--horizontal">            
        ...
    </div>
</div>

Example 1: The following code demonstrates the default centered alignment of content using the above classes.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> 
  
    <style> 
        body { 
            margin-left: 10px; 
            margin-right: 10px; 
        } 
  
        #mydiv { 
            border: 2px solid black; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green"> 
            GeeksforGeeks 
        </h1> 
          
        <strong>Blaze UI alignment centered</strong> 
        </br></br> 
  
        <div id="mydiv" class="u-center-block" 
            style="width:300px;height:300px"> 
            <div class="u-center-block__content"> 
                <b>This alignment is centered.</b> 
            </div> 
        </div> 
    </center> 
</body> 
  
</html>

Output:

Example 2: The following code demonstrates the vertical centered alignment of content using the above classes.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> 
  
    <style> 
        body { 
            margin-left: 10px; 
            margin-right: 10px; 
        } 
  
        #mydiv { 
            border: 2px solid black; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green"> 
            GeeksforGeeks 
        </h1> 
          
        <strong>Blaze UI vertical centered alignment </strong> 
        </br></br> 
  
        <div id="mydiv" class="u-center-block" 
            style="width:300px;height:300px"> 
            <div class="u-center-block__content  
                u-center-block__content--vertical"> 
                <b>Centered text</b> 
            </div> 
        </div> 
    </center> 
</body> 
  
</html>

Output:

Example 3: The following code demonstrates the horizontal centered alignment of content using the above classes.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> 
  
    <style> 
        body { 
            margin-left: 10px; 
            margin-right: 10px; 
        } 
  
        #mydiv { 
            border: 2px solid black; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green"> 
            GeeksforGeeks 
        </h1> 
          
        <strong>Blaze UI horizontal centered alignment </strong> 
        </br></br> 
  
        <div id="mydiv" class="u-center-block" 
            style="width:300px;height:300px"> 
            <div class="u-center-block__content  
                u-center-block__content--horizontal"> 
                <b>Centered text</b> 
            </div> 
        </div> 
    </center> 
</body> 
  
</html>