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 orientados a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
En este artículo, aprenderemos sobre la alineación de texto receptivo de tipografía. La alineación de texto sensible a la tipografía se utiliza para alinear el texto según el tamaño de la pantalla. Por ejemplo, el texto debe estar alineado a la izquierda si el tamaño de la pantalla es pequeño y alineado a la derecha si la pantalla es grande.
Clases de alineación de texto receptivo de tipografía:
- text-[ * ]-left : El texto se alineará a la izquierda en el tamaño de pantalla mencionado.
- text-[ * ]-center: El texto se centrará en el tamaño de pantalla mencionado alineado.
- text-[ * ]-right : El texto se alineará a la derecha en el tamaño de pantalla mencionado.
Por ejemplo, text-lg-left alineará el texto a la izquierda para dispositivos más grandes.
Nota: el tamaño de pantalla * se reemplazará con varios tamaños de pantalla como sm (pequeño), md (mediano), lg (grande).
Sintaxis:
<p class="text-[screen-size]-[alignment]" >
...
</p>
Ejemplo 1: En este ejemplo, escribiremos un texto y mostraremos cómo cambiará la alineación del texto a medida que cambiamos el tamaño de la pantalla. El texto se alinea a la izquierda cuando la pantalla es pequeña. Pero cuando la pantalla es grande, el texto se alinea al centro.
HTML
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> Typography Responsive Text Alignment</h3> <p class="text-left text-lg-center" style="color:red"> GeeksforGeeks is a computer science portal </p> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, escribiremos texto y mostraremos cómo aparece la alineación del texto en 3 tamaños de pantalla diferentes. El texto se alinea a la derecha cuando la pantalla es grande. Pero cuando se mueve la pantalla, el texto se alinea al centro y más a la izquierda.
HTML
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> Typography Responsive Text Alignment.</h3> <p class="text-left text-sm-center text-lg-right" style="color:red;"> GeeksforGeeks is a computer science portal </p> </body> </html>
Producción:
Referencia: https://primer.style/css/utilities/typography#responsive-text-alignment
Publicación traducida automáticamente
Artículo escrito por nikitamehrotra99 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA