Primer CSS es un marco CSS gratuito y de código abierto que se crea utilizando el sistema de diseño de GitHub para brindar soporte a la amplia gama de sitios web de GitHub. Ayuda a crear la base de los elementos de estilo básicos, como el espaciado, los componentes, la tipografía, el color, etc.
En este artículo, veremos los elementos de Primer CSS Margin Center . Las utilidades de elementos de centro de margen se utilizan para centrar elementos de bloque con márgenes iguales en todos los lados del elemento.
Primer CSS Margin Center clases de elementos:
- mx-auto: esta clase se utiliza para centrar elementos de bloque con un ancho establecido.
- mt-auto: esta clase se utiliza para proporcionar un margen direccional de la parte superior.
- mb-auto: esta clase se utiliza para proporcionar un margen direccional de la parte inferior.
- ml-auto: esta clase se utiliza para proporcionar un margen direccional a la izquierda.
- mr-auto: esta clase se utiliza para proporcionar un margen direccional a la derecha.
Sintaxis:
<div class="color-bg-success">
<div class="mx-auto color-bg-subtle text-center"
style="max-width: 500px;">.mx-auto text</div>
</div>
Ejemplo 1: El siguiente ejemplo muestra los elementos del centro del margen.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Primer</title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet"/> </head> <body> <div class="m-4"> <h1 style="color: green">GeeksforGeeks</h1> <h2>Primer CSS Margin Center Elements</h2> </div> <div class="color-bg-success"> <div class="mx-auto color-bg-success-emphasis text-center color-fg-on-emphasis" style="max-width: 500px;"> Welcome to GeeksforGeeks </div> </div> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra todos los márgenes automáticos direccionales en los elementos centrales.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <div class="m-4"> <h1 style="color: green;"> GeeksforGeeks </h1> <h2>Primer CSS Margin Center Elements</h2> </div> <div class="d-flex border mb-4 color-bg-success"> <div style="height:100px;"></div> <div class="border mt-auto color-bg-success-emphasis color-fg-on-emphasis">Box at the bottom.</div> <div class="border mb-auto color-bg-success-emphasis color-fg-on-emphasis">Box at the top.</div> </div> <div class="d-flex flex-column border color-bg-success"> <div class="border ml-auto color-bg-success-emphasis color-fg-on-emphasis">Box in the right.</div> <div class="border mr-auto color-bg-success-emphasis color-fg-on-emphasis">Box in the left.</div> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/utilities/margin#center-elements
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA