Semantic-UI Card Text 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.
The semantic UI Card element displays site content in a manner similar to a playing card using the Semantic UI classes. In this article, we will discuss the text alignment variations of semantic-Ui cards.
To change the text alignment of the semantic UI card, we use the “center/left/right aligned” class in the section of the card where we want the alignment. We can use this class in main <div> that contains the “card” class if we want the text alignment on the entire card or we can align different sections of the card separately too.
Semantic-UI Card Text Alignment Variation Class:
- center aligned: This class is used to align the card’s text to the center.
- left aligned: This class is used to align the card’s text to the left.
- right aligned: This class is used to align the card’s text to the right.
Syntax:
<div class="center/left/right aligned card">
content....
</div>Example 1: This example demonstrates various text alignment variations of the semantic-Ui card.
HTML
<!DOCTYPE html><html><head> <link href= rel="stylesheet" /></head><body> <center> <h1>Geeksforgeeks</h1> <strong> Semantic UI card Text-Alignment variations </strong><br /><br /> </center> <div class="ui one cards"> <div class="card"> <div class="left aligned content"> Geeksforgeeks Left </div> </div> <div class="card"> <div class="center aligned content"> Geeksforgeeks Center </div> </div> <div class="card"> <div class="right aligned content"> Geeksforgeeks Right </div> </div> </div></body></html> |
Output:
Output
Example 2: This example demonstrates different text alignment variations in different sections of the same card.
HTML
<!DOCTYPE html><html><head> <link href= rel="stylesheet" /></head><body> <center> <h1>Geeksforgeeks</h1> <strong> Semantic UI card Text-Alignment variations </strong><br /><br /> </center> <div class="ui card" style="margin-left: 100px"> <div class="content"> <div class="left aligned header"> Geeksforgeeks </div> <div class="center aligned description"> <p> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles. </p> </div> </div> <div class="extra content"> <div class="right aligned author"> <img class="ui avatar image" src= Priyank </div> </div> </div></body></html> |
Output:
Output
Reference: https://semantic-ui.com/views/card.html#text-alignment
Please Login to comment...