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 = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> </ head > < body > < center > < h1 >w3wiki</ 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" > w3wiki Left </ div > </ div > < div class = "card" > < div class = "center aligned content" > w3wiki Center </ div > </ div > < div class = "card" > < div class = "right aligned content" > w3wiki Right </ div > </ div > </ div > </ body > </ html > |
Output:
Example 2: This example demonstrates different text alignment variations in different sections of the same card.
HTML
<!DOCTYPE html> < html > < head > < link href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> </ head > < body > < center > < h1 >w3wiki</ 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" > w3wiki </ div > < div class = "center aligned description" > < p > A Computer Science portal for Beginner. 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 = "http://www.w3wiki.net/wp-content/uploads/gfg_200X200-1.png" /> Priyank </ div > </ div > </ div > </ body > </ html > |
Output:
Reference: https://semantic-ui.com/views/card.html#text-alignment