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">
</divExample 1: In this example, we will describe the Semantic-UI Image Centered Variations.
<!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.
<!DOCTYPE html> <html>
<head>
<title>
Semantic-UI Image Centered Variations
</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</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