📜  使列居中的 CSS 网格入门

📅  最后修改于: 2022-05-13 01:56:26.077000             🧑  作者: Mango

使列居中的 CSS 网格入门

Primer CSS是一个免费的开源 CSS 框架,它建立在创建基本样式元素(如间距、排版和颜色)基础的系统之上。这种系统化的方法确保我们的模式是稳定的并且可以相互操作。它的 CSS 方法受到面向对象的 CSS 原则、函数式 CSS 和 BEM 架构的影响。它具有高度可重用性和灵活性。它是使用 GitHub 的设计系统创建的。

Grid Centering Column将容器内的列居中。我们可以使用mx-auto类使列居中。

以列类为中心的 CSS 网格入门:

  • mx-auto:此类用于使列居中。

句法:

Content

示例 1:此示例演示了 Primer CSS Grid Centering a Column 以使文本居中的实现。

HTML


  

     Primer CSS Grid Centering a Column 
     
  

    
        

              GeeksforGeeks         

        

            Primer CSS Grid Centering a Column          

      
    
    
        A Computer Science portal for geeks.     


HTML


  

     Primer CSS Grid Centering a Column 
    

  

    
        

GeeksforGeeks

        

Primer CSS Grid Centering a Column

    
    
    
              


输出:

使列居中的 CSS 网格入门

示例 2:此示例演示了 Primer CSS Grid Centering a Column 以使图像居中的实现。

HTML



  

     Primer CSS Grid Centering a Column 
    

  

    
        

GeeksforGeeks

        

Primer CSS Grid Centering a Column

    
    
    
              

输出:

使列居中的 CSS 网格入门

参考: https://primer.style/css/utilities/grid#centering-a-column