Semantic-UI 项目垂直对齐变化

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

Semantic-UI Item 变体为我们提供了不同的 item 变体，例如 Stacking、Divided、Relaxed、Link Item、Vertical Alignment 和 Floating Content。在本文中，我们将了解 Semantic-UI Item Variations Vertical Alignment 变体。

Semantic-UI Item Variations Vertical Alignment 变体用于定义项目的垂直对齐方式。

Semantic-UI Item Variations Vertical Alignment Variant 类：

• 顶部对齐：此类用于在顶部进行对齐。
• 中间对齐：该类用于在中间对齐。
• 底部对齐：该类用于使底部居中。

句法：

...

下面的示例说明了 Semantic-UI Item Variations Vertical Alignment Variant：

示例 1：在此示例中，我们将设置项目垂直对齐方式居中。

HTML

    
        
    
    
        
            

              GeeksforGeeks
            
            Semantic-UI Item Variations Vertical Alignment Variant
        
        


        

        

          

            

              
            
            

              
                  Geeksforgeeks
              
              

                A Computer Science Portal for Geeks
              
            
          
       
       
    

输出：

Semantic-UI Item Variations 垂直对齐变体

示例 2：在此示例中，我们将设置 Item Vertical 对齐方式为顶部和底部。

HTML

    
        
    
    
        
            

              GeeksforGeeks
            
            Semantic-UI Item Variations Vertical Alignment Variant
        
        


        

        

          Top Alignment:
          

            

              
            
            

              
                  Geeksforgeeks
              
              

                A Computer Science Portal for Geeks
              
            
          
          Bottom Alignment:
          

            

              
            
            

              
                  Geeksforgeeks
              
              

                A Computer Science Portal for Geeks
              
            
          
       
    

输出：

Semantic-UI Item Variations 垂直对齐变体

参考： https ://semantic-ui.com/views/item.html#vertical-alignment