Open In App

Blaze UI Alignment Vertical

Improve
Improve
Like Article
Like
Save
Share
Report

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 Vertical alignment in Blaze UI.

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

Blaze UI Alignment Vertical classes:

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

Syntax:

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

Example 1: This example demonstrates the text element centered inside a div using the Vertical 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=
</head>
  
<body>
  <center>
    <h1 style="color:green">GeeksforGeeks</h1>
    <strong>Blaze UI Vertical Alignment</strong>
    <br>
    <div class="demo u-center-block">
      <div class="u-center-block__content 
        u-center-block__content--vertical">
        Hello Blaze!
      </div>
    </div>
  </center>
</body>
  
</html>


Output:

Blaze UI Alignment Vertical

Example 2: This example demonstrates the image element centered inside a div using the Vertical 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=
</head>
  
<body>
  <center>
    <h1 style="color:green">GeeksforGeeks</h1>
    <strong>Blaze UI Vertical Alignment</strong>
    <br>
    <div class="demo u-center-block">
      <div class="u-center-block__content 
         u-center-block__content--vertical">
        <img src=
      </div>
    </div>
  </center>
</body>
  
</html>


Output:

Blaze UI Alignment Vertical

Reference: https://www.blazeui.com/utils/alignment/



Last Updated : 19 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads