Open In App

Semantic-UI Image Vertically Aligned Variations

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap.

There are different styles of putting images on our website using semantic-ui that make our website look more awesome. Semantic-UI Image Vertically Aligned Variations are used to add the vertical alignment of images in a web page. 

Semantic-UI Image Vertically Aligned Variations classes:

  • top aligned: It is used to set the alignment to the top.
  • middle aligned: It is used to set the alignment to the middle.
  • bottom aligned: It is used to set the alignment to the bottom.

Syntax:

<img class="ui top aligned image" src="gfg.png">
<span>Top Aligned</span>

Example 1: In this example, we will use Semantic-UI Image Vertically Aligned Variations to display the alignment of the image.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Image Vertically Aligned Variations
    </title>
  
</head>
  
<body>
    <div class="ui center aligned container">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
  
        <h3>Semantic-UI Image Vertically Aligned Variations</h3>
  
        <img class="ui top aligned tiny image" src=
        <span>GeeksforGeeks Top Aligned</span>
        <hr>
  
        <img class="ui middle aligned tiny image" src=
        <span>GeeksforGeeks Middle Aligned</span>
        <hr>
  
        <img class="ui bottom aligned tiny image" src=
        <span>GeeksforGeeks Bottom Aligned</span>
    </div>
</body>
  
</html>


Output:

Example 2: In this example, we will use Semantic-UI Image Vertically Aligned Variations with Circular variations to display the alignment of image.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Image Vertically Aligned Variations
    </title>
  
    <link rel="stylesheet" href=
</head>
  
<body>
    <div class="ui center aligned container">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
  
        <h3>Semantic-UI Image Vertically Aligned Variations</h3>
  
        <img class="ui top aligned tiny circular image" src=
        <span>GeeksforGeeks Top Aligned</span>
        <hr>
  
        <img class="ui middle aligned tiny circular image" src=
        <span>GeeksforGeeks Middle Aligned</span>
        <hr>
  
        <img class="ui bottom aligned tiny circular image" src=
        <span>GeeksforGeeks Bottom Aligned</span>
    </div>
</body>
  
</html>


Output:

Reference: https://semantic-ui.com/elements/image.html#vertically-aligned



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