Semantic-UI 卡片文本对齐变化

Semantic UI 是一个开源框架，它使用 CSS 和 jQuery 构建出色的用户界面。它与使用的引导程序相同，并且有很多不同的元素可用于使您的网站看起来更令人惊叹。

语义 UI Card 元素以类似于使用语义 UI 类的扑克牌的方式显示站点内容。在本文中，我们将讨论语义 Ui 卡片的文本对齐变化。

为了改变语义 UI 卡片的文本对齐方式，我们在卡片中我们想要对齐的部分使用“中心/左/右对齐”类。如果我们想要整个卡片上的文本对齐，我们可以在包含“card”类的主

中使用这个类，或者我们也可以单独对齐卡片的不同部分。

Semantic-UI 卡片文本对齐变体类：

• 居中对齐：该类用于将卡片的文本居中对齐。
• 左对齐：此类用于将卡片的文本左对齐。
• 右对齐：该类用于将卡片的文本右对齐。

句法：

    content....

示例 1：此示例演示了语义 Ui 卡的各种文本对齐方式。

HTML

 

    

 

    
        
Geeksforgeeks
        
            Semantic UI card Text-Alignment variations
        


    
 
    

        

            

                Geeksforgeeks Left
            
        
 
        

            

                Geeksforgeeks Center
            
        
 
        

            

                Geeksforgeeks Right
            
        
    

 

输出：

输出

示例 2：此示例演示了同一张卡片不同部分的不同文本对齐方式。

HTML

 

    

 

    
        
Geeksforgeeks
        
            Semantic UI card Text-Alignment variations
        


    
 
    

        

            

                Geeksforgeeks
            
 
            

                 

                    A Computer Science portal for geeks.
                    It contains well written, well
                    thought and well explained computer
                    science and programming articles.
                
 
            
        
 
        

            

                
                Priyank
            
        
    

 

输出：

输出

参考： https ://semantic-ui.com/views/card.html#text-alignment