Blaze UI Alignment Horizontal

Last Updated : 19 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.

Alignment helps us to place the right element at the right place on the screen. The Blaze UI provides us with multiple classes that help us to align objects on the screen. There are multiple types of alignments in Blaze UI, such as centered, vertical, horizontal, centered absolutely, and much more. In this article, we will discuss the horizontal alignment in Blaze UI.

Horizontal alignment positions an element perfectly in the center of a relative container horizontally. To position an element in the horizontally center of its parent element, we use the .u-center-block__content–horizontal class. The .u-center-block__content–horizontal class positions the given element to the horizontal center of the parent element.

Blaze UI Alignment Horizontal classes used:

u-center-block__content–horizontal: This class positions the element to the horizontal center of the parent element.

Syntax:

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

Example 1: This example demonstrates the text element centered inside a div using the horizontal alignment class of Blaze UI.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Blaze UI</title> 
    <style> 
        .demo{ 
          height: 500px; 
          width: 500px; 
          background-color: green; 
          color: white; 
        } 
    </style> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> 
</head> 
  
<body> 
    <center> 
      <h1 style="color:green">GeeksforGeeks</h1> 
      <strong>Blaze UI Horizontal Alignment</strong> 
      <br> 
      <div class="demo u-center-block"> 
        <div class="u-center-block__content  
          u-center-block__content--horizontal"> 
          Hello Blaze! 
        </div> 
      </div> 
    </center> 
</body> 
  
</html>

Output:

Blaze UI Alignment Horizontal

Example 2: This example demonstrates the image element centered inside a div using the horizontal alignment class of Blaze UI.

HTML

<!DOCTYPE html> 
<html lang="en"> 
      
<head> 
  <title>Blaze UI</title> 
  <style> 
      .demo{ 
        height: 500px; 
        width: 500px; 
        background-color: green; 
        color: white; 
      } 
  </style> 
  <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> 
</head> 
  
<body> 
    <center> 
      <h1 style="color:green">GeeksforGeeks</h1> 
      <strong>Blaze UI Horizontal Alignment</strong> 
      <br> 
      <div class="demo u-center-block"> 
        <div class="u-center-block__content  
           u-center-block__content--horizontal"> 
          <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"/> 
        </div> 
      </div> 
    </center> 
</body> 
  
</html>