Semantic-UI Item Vertical Alignment Variation
Last Updated :
21 Feb, 2022
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
Share your thoughts in the comments
Please Login to comment...