Semantic-UI List Vertically Aligned Content Variation
Last Updated :
13 Mar, 2022
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.
Semantic-UI list provides us with different variations of the list, like Horizontal, Inverted, Selection, Animated, Relaxed, Divided, Celled, and Size variants.
Semantic-UI List Vertically Aligned Content Variation is used to add vertical alignment inside of the list items.
Semantic-UI List Vertically Aligned Content Variation Used Class:
- top aligned: This class is used to set the top alignment of the list item.
- middle aligned: This class is used to set the middle alignment of the list item.
- bottom aligned: This class is used to set the bottom alignment of the list item.
Syntax:
<div class="ui horizontal list">
<div class="item">
<img class="ui avatar image" src="gfg.png">
<div class="top aligned content"> Content... </div>
</div>
...
</div>
Example 1: This example describes the uses of Semantic-UI List Vertically Aligned Content Variation.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI List Vertically Aligned Content Variation
</title>
<link rel="stylesheet"
href=
</head>
<body>
<div class="ui container">
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>Semantic-UI List Vertically Aligned Content Variation</h3>
<div class="ui list">
<div class="item">
<img class="ui avatar image"
src=
<div class="top aligned content">GeeksforGeeks</div>
</div>
<div class="item">
<img class="ui avatar image"
src=
<div class="middle aligned content">HTML</div>
</div>
<div class="item">
<img class="ui avatar image"
src=
<div class="bottom aligned content">CSS</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI List Vertically Aligned Content Variation
Example 2: This example describes the uses of Semantic-UI List Vertically Aligned Content Variation.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI List Vertically
Aligned Content Variation
</title>
<link rel="stylesheet"
href=
</head>
<body>
<div class="ui container center aligned">
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>
Semantic-UI List Vertically Aligned
Content Variation
</h3>
<div class="ui horizontal list">
<div class="item">
<img class="ui avatar image"
src=
<div class="top aligned content">
GeeksforGeeks
</div>
</div>
<div class="item">
<img class="ui avatar image"
src=
<div class="middle aligned content">
HTML
</div>
</div>
<div class="item">
<img class="ui avatar image"
src=
<div class="bottom aligned content">
CSS
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI List Vertically Aligned Content Variation
Reference: https://semantic-ui.com/elements/list.html#vertically-aligned
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...