Primer CSS alineado a la derecha

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 la alineación derecha del texto tipográfico . La alineación derecha del texto tipográfico se utiliza para alinear el texto a la derecha.

Primer CSS Clase alineada a la derecha:

text-right: Esta clase se utiliza para alinear el texto a la derecha.

Sintaxis:

<p class="text-right">
    ...
</p>

Ejemplo 1: en este ejemplo, escribiremos un 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>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3> Typography Text Align</h3>
  
    <h3 style="color:red">Text-Right</h3>
    <p class="text-right">
        GeeksforGeeks is a Computer Science Portal
    </p>
</body>
  
</html>

Producción:

Primer CSS Alineado a la derecha

Ejemplo 2: Este es otro ejemplo para demostrar la alineación a la derecha usando una etiqueta de encabezado.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Primer CSS Typography Text Align</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" />
</head>
  
<body>
    <center>
        <div style="border: 2px solid green; 
        width: 500px; height: 400px;">
            <h1 style="color:green">GeeksforGeeks</h1>
            <h3>Primer CSS Typography Text Align</h3>
            <h3 class="text-right mt-5">
                GeeksforGeeks is a Computer Science Portal
            </h3>
        </div>
    </center>
</body>
  
</html>

Producción:

Primer CSS Alineado a la derecha

Referencia: https://primer.style/css/utilities/typography#text-alignment

Publicación traducida automáticamente

Artículo escrito por singhtripti y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

HTML

Deja una respuesta Cancelar la respuesta