Semantic-UI Item Vertical Alignment Variation

Last Updated : 21 Feb, 2022

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.

Semantic-UI Item variations offer us different variants of items like Stacking, Divided, Relaxed, Link Item, Vertical Alignment, and Floated Content. in this article we will learn about the Semantic-UI Item Variations Vertical Alignment variant.

Semantic-UI Item Variations Vertical Alignment variant is used to define the item alignment vertically.

Semantic-UI Item Variations Vertical Alignment Variant Class:

top alignment: This class is used to make the alignment at top.
middle alignment: This class is used to make the alignment at middle.
bottom alignment: This class is used to make the bottom at middle.

Syntax:

<div class="Vertical-Alignment-Variant-Class content">
...
</div>

Below examples illustrate the Semantic-UI Item Variations Vertical Alignment Variant:

Example 1: In this example we will set the Item Vertical alignment middle.

HTML

<!DOCTYPE html>
<html>
    <head>
        <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
            rel="stylesheet" />
    </head>
    <body>
        <center>
            <h1 class="ui header green">
              GeeksforGeeks
            </h1>
            <strong>Semantic-UI Item Variations Vertical Alignment Variant</strong>
        </center>
        <br><br>
        <br>
        <div class="ui  items container">
          <div class="item">
            <div class="image">
              <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg.png">
            </div>
            <div class="middle aligned content">
              <a class="header"
                 href="https://www.geeksforgeeks.org/">
                  Geeksforgeeks
              </a>
              <div class="meta">
                <span>A Computer Science Portal for Geeks</span>
              </div>
            </div>
          </div>        
       </div>
    </body>
</html>

Output:

Semantic-UI Item Variations Vertical Alignment Variant

Example 2: In this example we will set the Item Vertical alignment top and bottom.

HTML

<!DOCTYPE html>
<html>
    <head>
        <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
            rel="stylesheet" />
    </head>
    <body>
        <center>
            <h1 class="ui header green">
              GeeksforGeeks
            </h1>
            <strong>Semantic-UI Item Variations Vertical Alignment Variant</strong>
        </center>
        <br><br>
        <br>
        <div class="ui items container">
          <strong>Top Alignment:</strong>
          <div class="item">
            <div class="image">
              <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg.png">
            </div>
            <div class="top aligned content">
              <a class="header"
                 href="https://www.geeksforgeeks.org/">
                  Geeksforgeeks
              </a>
              <div class="meta">
                <span>A Computer Science Portal for Geeks</span>
              </div>
            </div>
          </div> 
          <strong>Bottom Alignment:</strong>
          <div class="item">
            <div class="image">
              <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg.png">
            </div>
            <div class="bottom aligned content">
              <a class="header"
                 href="https://www.geeksforgeeks.org/">
                  Geeksforgeeks
              </a>
              <div class="meta">
                <span>A Computer Science Portal for Geeks</span>
              </div>
            </div>
          </div> 
       </div>
    </body>
</html>