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.
En este artículo, discutiremos sobre la alineación del texto tipográfico . La alineación del texto tipográfico se utiliza para alinear el texto a la izquierda, al centro o a la derecha.
Clase:
- text-left: Esta clase se utiliza para alinear el texto a la izquierda.
- text-center: Esta clase se utiliza para alinear el texto al centro.
- text-right: Esta clase se utiliza para alinear el texto a la derecha.
Sintaxis:
<p class="text-* ">
Content
</p>
Este * se puede sustituir con las clases respectivas como se mencionó anteriormente.
Ejemplo 1: En este ejemplo, escribiremos texto y usaremos la clase text-left para alinearlo a la izquierda.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" /> </head> <body> <div> <h1 style="color:green">GeeksforGeeks</h1> <h3> Typography Text Align</h3> </div> <h3 style="color:red">Text-Left</h3> <p class="text-left"> GeeksforGeeks is a Computer Science Portal </p> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, escribiremos texto y usaremos la clase text-center para alinearlo al centro.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" /> </head> <body> <div> <h1 style="color:green">GeeksforGeeks</h1> <h3> Typography Text Align</h3> </div> <h3 style="color:red">Text-Center</h3> <p class="text-center"> GeeksforGeeks is a Computer Science Portal </p> </body> </html>
Producción:
Ejemplo 3: En este ejemplo, escribiremos texto y usaremos la clase text-right para alinearlo a la derecha.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" /> </head> <body> <div> <h1 style="color:green">GeeksforGeeks</h1> <h3> Typography Text Align</h3> </div> <h3 style="color:red">Text-Right</h3> <p class="text-right"> GeeksforGeeks is a Computer Science Portal </p> </body> </html>
Producción:
Referencia: https://primer.style/css/utilities/typography#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