Open In App

Semantic-UI Card Text Alignment Variation

Last Updated : 22 Feb, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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



Similar Reads

Semantic-UI Segment Text Alignment Variation
Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap. Semantic UI provides the user's segment clas
2 min read
Semantic-UI Table 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. It uses a class to add CSS to the elements. Tables are an easy way to organize a lot of data. A table is an arrangement of data in rows
3 min read
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 Fl
2 min read
Semantic-UI Dimmer Vertical Alignment Variation
Semantic UI is a modern framework used in developing seamless designs for the website. It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks. Semantic UI Dimmer is used to hiding the distractions or site content and move focus to the main content. It can be used to view
2 min read
Semantic-UI Table 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. It uses a class to add CSS to the elements. Tables are an easy way to organize a lot of data. A table is an arrangement of data in rows
3 min read
Semantic-UI Card Centered 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 provides us with a very easy way to display content in the form of cards in a very easy way instead of using CSS. Semantic
2 min read
Semantic-UI Card Colored 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
3 min read
Semantic-UI Card Stackable 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 and responsive. Semantic UI treats words and classes as exchangeable concepts. The semantic UI Card element displays site content in a m
3 min read
Semantic-UI Card Doubling 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 and responsive. The semantic UI Card element displays site content in a manner similar to a playing card using the Semantic UI classes.
4 min read
Semantic-UI Card Column Count 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 and responsive. The semantic UI Card element displays site content in a manner similar to a playing card using the Semantic UI classes.
3 min read