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.

Output:

Output

Example 2: This example demonstrates different text alignment variations in different sections of the same card.

Output:

Output

Reference: https://semantic-ui.com/views/card.html#text-alignment