Semantic-UI Item Vertical Alignment Variation
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= 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= </div> <div class="middle aligned content"> <a class="header" 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= 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= </div> <div class="top aligned content"> <a class="header" 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= </div> <div class="bottom aligned content"> <a class="header" 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
Reference: https://semantic-ui.com/views/item.html#vertical-alignment
Please Login to comment...