Open In App

Blaze UI Containers Vertical Alignment

Improve
Improve
Like Article
Like
Save
Share
Report

Blaze UI is a CSS open-source framework. It is a lightweight UI toolkit and provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive. Its project is available open-source so a large community maintains it.

Blaze UI Containers provide a media screen of different widths to put the content inside it according to different requirements. The containers have sizes ranging from small to super big.

Blaze UI Containers Vertical Alignment Class:

  • u-center-block__content–vertical: This will align the content vertically.

Syntax: Align the content vertically as follows:

<div class="u-center-block">
  <div class="u-center-block__content 
    u-center-block__content--vertical">
    <!-- Content -->
  </div>
</div>

Example 1: In the following example, we have content centered vertically inside a fixed-size container.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
    <script type="module" src=
    </script>
    <script nomodule="" src=
    </script>
    </script>
</head>
  
<body>
    <div class="o-container">
        <center>
            <h1 style="color: green;">
                GeeksforGeeks
            </h1>
              
            <strong>Blaze UI Containers Vertical Alignment</strong>
            <br />
        </center>
        <br />
        <div class="u-center-block" 
            style="height: 200px; background-color: lightgreen;">
            <div class="u-center-block__content 
                u-center-block__content--vertical">
                <h3>Welcome to GeeksforGeeks</h3>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

 

Example 2: In the following example, we have multiple containers with centered content vertically.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0"/>
    <title>GeeksforGeeks | BlazeUI</title>
    <link rel="stylesheet" href=
    <script type="module" src=
    </script>
    <script nomodule="" src=
    </script>
    <script src=
    </script>
</head>
<body>
    <div class="o-container">
        <center>
            <div>
                <h1 style="color: green;">GeeksforGeeks</h1>
            </div>
            <strong>Blaze UI Containers Vertical Alignment</strong>
            <br/>
        </center>
        <br/>
        <div class="u-center-block" style="height: 200px; 
            background-color: lightgreen;">
            <div class="u-center-block__content 
                u-center-block__content--vertical">
                <h3>Welcome to GeeksforGeeks</h3>
            </div>
        </div>
        <div class="u-center-block" style="height: 200px; 
            background-color: lightcoral;">
            <div class="u-center-block__content 
                u-center-block__content--vertical">
                <h3>Data Structures and Algorithms</h3>
            </div>
        </div>
        <div class="u-center-block" style="height: 200px; 
            background-color: lightgoldenrodyellow;">
            <div class="u-center-block__content 
                u-center-block__content--vertical">
                <h3>Machine Learning</h3>
            </div>
        </div>
    </div>
</body>
</html>


Output:

 

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



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