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.
El diseño se utiliza para mostrar el contenido con un estilo particular. Por ejemplo, podemos cambiar el diseño del documento usando visualización, flotación, alineación y otras utilidades.
Primer CSS Alignment Layout se utiliza para establecer la posición de los elementos. Podemos alinear los elementos ya sea horizontal o verticalmente. En esta sección, alinearemos el contenido verticalmente. La propiedad de alineación vertical solo funciona en cuadros en línea o de celdas de tabla.
Clases usadas:
- .v-align-baseline: esta clase se usa para establecer la alineación vertical en la línea de base.
- .v-align-top: esta clase se usa para establecer la alineación vertical en la parte superior.
- .v-align-middle: esta clase se usa para establecer la alineación vertical en el medio.
- .v-align-bottom: esta clase se usa para establecer la alineación vertical en la parte inferior.
- v-align-text-top: esta clase se usa para ajustar la alineación en la parte superior del elemento principal.
- v-align-text-bottom: esta clase se usa para ajustar la alineación en la parte inferior del elemento principal.
Sintaxis:
<div class="d-table">
<div class="d-table-cell"> ... <div>
...
</div>
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Layout Alignment</title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <div class="text-center"> <h1 class="color-fg-open"> GeeksforGeeks </h1> <h3>Primer CSS Layout Alignment</h3> <div class="d-table border color-border-success-emphasis"> <div class="d-table-cell"><h1>GeeksforGeeks</h1></div> <div class="d-table-cell v-align-baseline"> Vertical Align Baseline </div> <div class="d-table-cell v-align-top"> Vertical Align Top </div> <div class="d-table-cell v-align-middle"> Vertical Align Middle </div> <div class="d-table-cell v-align-bottom"> Vertical Align Bottom </div> </div> </div> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Layout Alignment</title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <div class="text-center"> <h1 class="color-fg-open"> GeeksforGeeks </h1> <h3>Primer CSS Layout Alignment</h3> <div class="border color-border-success-emphasis"> <h1>GeeksforGeeks <span class="f4 v-align-text-top"> Vertical Align Text Top </span> <span class="f4 v-align-text-bottom"> Vertical Align Text Bottom </span> </h1> </div> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/utilities/layout#alignment