Skip to content
Related Articles

Related Articles

Blaze UI Containers Vertical Alignment

View Discussion
Improve Article
Save Article
  • Last Updated : 27 Apr, 2022
View Discussion
Improve Article
Save Article

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/


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!