CSS |布局 – 水平和垂直对齐

CSS 中的 Layout 用于控制元素在另一个元素内的流动。它设置元素在网页中的位置。可以使用水平和垂直对齐方式设置元素的位置。有多种方法可以设置元素的位置，如下所示：

使用Position 属性：使用position 属性到absolute 来设置左右对齐。

句法：

position: absolute;

例子：

 
 
     
         
      
        
    
      
     
        

            
 
                GeeksForGeeks 
            
 
              
            
CSS Layout
        
     
                                

输出：

使用 text-align 属性：使用 text-align 属性设置元素的水平对齐方式。 text-align 属性可以设置为左、右或居中。

句法：

text-align: center;

例子：

 
 
     
         
      
        
    
      
     
        

            
 
                GeeksForGeeks 
            
 
                  
            
CSS Layout
        
     
                                

输出：

使用 float 属性：使用 float 属性设置元素的对齐方式。浮点值可以设置为左或右。

句法：

float: right;

例子：

 
 
     
         
      
        
    
      
     
        

            
 
                GeeksForGeeks 
            
 
              
            
CSS Layout
        
     
                    

输出：

Use Padding property Horizontally： Padding 属性用于通过使用左右填充将元素对齐到水平。

句法：

padding: 0 100px;

例子：

 
 
     
        
      
        
    
      
     
        

            
 
                GeeksForGeeks 
            
 
              
            
CSS Layout
        
     
                    

输出：

垂直使用填充属性：填充属性用于通过使用顶部和底部填充将元素对齐为垂直。

句法：

padding: 15px 0;

例子：

 
 
     
         
          
        
    
      
     
        

            
 
                GeeksForGeeks 
            
 
                  
            
CSS Layout
        
     
                    

输出：

行高属性：行高用于设置垂直对齐。

句法：

line-height: 40px;

例子：

 
 
     
         
  
        
    
      
     
        

            
 
                GeeksForGeeks 
            
 
              
            
CSS Layout
        
     
                    

输出：

使用边距属性：边距属性用于设置自动，水平对齐块元素。

句法：

margin: auto;

例子：

 
 
     
         
  
        
    
          
     
        

            
 
                GeeksForGeeks 
            
 
              
            
CSS Layout
        
     
                    

输出：

使用 Clearfix：如果任何元素比其父元素高并且它是浮动的，那么它将溢出到它的容器之外。溢出设置为自动来解决这个问题。

句法：

overflow: auto;

例子：

 
 
     
         
      
        
    
      
     
        

            
 
                GeeksForGeeks 
            
 
              
            
CSS Layout
        
     
                    

输出：

使用转换和定位： transform 属性用于将元素相对于其父元素以及位置转换为绝对。

句法：

position: absolute;
transform: translate(X%, Y%);

例子：

 
 
     
         
  
        
    
      
     
        

            
 
                GeeksForGeeks 
            
 
              
            
CSS Layout
        
     
                    

输出：