Open In App

Semantic-UI Card Centered Variation

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

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 UI provides us a way to display cards in different variations and with different content involved like links, buttons, approval, etc. In this article, let us learn about Semantic UI Card Centered Variation and learn the implementation of it with the help of example code.

Semantic UI Card Centered Variation: The Card Centered Variation in Semantic UI helps us to align the entire card to the center of the container. The card will automatically center itself in the container in card-centered variation.

Semantic UI Card Centered Variation Content Classes:

  • .centered: The entire card should be enclosed in .centered class to center the card.
  • .image: Enclose the image with this class.
  • .content: The content should be included within this class.

Syntax :

<div class="ui centered card">
  <div class="image">
    ...
  </div>
  <div class="content">
    ...
  </div>
</div>

Example:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
  
    <link rel="stylesheet" href=
</head>
  
<body>
    <center>
        <h1 class="header ui green">GeeksforGeeks</h1>
        <strong>Semantic UI Card Centered Variation</strong>
    </center>
  
    <div class="ui centered card">
        <div class="image">
            <img src=
        </div>
        <div class="content">
            <a class="header">GeeksforGeeks</a>
        </div>
    </div>
</body>
  
</html>


Output :

Reference Link: https://semantic-ui.com/views/card.html#centered-card



Similar Reads

Semantic-UI Advertisement 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. In this article, we are going to learn about Advertisement Centered Variation. It is equipped with pre-built semantic components that h
2 min read
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
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
Semantic-UI Card Floated Content 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
Semantic-UI Card Raised 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. We can display the web content in the form of cards just like how content is displayed on playing cards in Semantic UI in a very simple
3 min read
Semantic-UI Card Link 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 cards in Semantic UI are in general used to display web content just like the playing cards. Semantic UI provides us cards in many
3 min read
Semantic-UI Card Variations Fluid Card Variant
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 offers several card variations like fluid card, centered card, raised card, link card, floated content, text alignment, col
2 min read