Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
La columna de centrado de cuadrícula centra las columnas dentro del contenedor. Podemos centrar las columnas usando la clase mx-auto .
Primer CSS Grid Centrar una clase de columna:
- mx-auto: Esta clase se usa para centrar las columnas.
Sintaxis:
<div class="col-4 mx-auto">
Content
</div>
Ejemplo 1: Este ejemplo demuestra la implementación de Primer CSS Grid Centering a Column para centrar el texto.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Grid Centering a Column </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Grid Centering a Column </h3> </div> <br> <div class="col-2 mx-auto border"> A Computer Science portal for geeks. </div> </body> </html>
Producción:
Primer CSS Grid Centrado de una columna
Ejemplo 2: Este ejemplo demuestra la implementación de Primer CSS Grid Centering a Column para centrar la imagen.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Grid Centering a Column </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Grid Centering a Column </h3> </div> <br> <div class="col-2 mx-auto"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" alt="GFG_logo"> </div> </body> </html>
Producción:
Primer CSS Grid Centrado de una columna
Referencia: https://primer.style/css/utilities/grid#centering-a-column
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA