Semantic-UI Card Text Alignment Variation

Last Updated : 22 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.

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>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=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        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=
"http://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200-1.png" />
                Priyank
            </div>
        </div>
    </div>
</body>
 
</html>