Open In App

Semantic-UI Image Centered 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 in our website using semantic-ui that makes our website look more awesome. Semantic-UI Image Centered Variations is used to add centered image in a content block.

Semantic UI image centered variation class:

  • centered: It is used to place the image to center of the content block.

Syntax:

<div class="ui segment">
    <img class="ui centered medium image" src="gfg.png">
</div

Example 1: In this example, we will describe the Semantic-UI Image Centered Variations.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Image Centered Variations 
    </title>
  
    <link rel="stylesheet" href=
</head>
  
<body>
    <div class="ui center aligned container">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
  
        <h3>Semantic-UI Image Centered Variations </h3>
  
        <img class="ui centered image" src=
    </div>
</body>
  
</html>


Output:

Example 2: In this example, we will describe the Semantic-UI Image Centered Variation with rounded variation.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Image Centered Variations
    </title>
  
</head>
  
<body>
    <div class="ui center aligned container">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
  
        <h3>Semantic-UI Image Centered Variations </h3>
  
        <img class="ui centered circular image" src=
    </div>
</body>
  
</html>


Output:

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



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