CSS: cómo alinear un enlace de anclaje al lado derecho de una página

CSS: cómo alinear un enlace de anclaje al lado derecho de una página

En este tutorial aprenderemos a alinear un ancla <a> enlace al lado derecho de una página usando CSS.

Considere, tenemos el siguiente enlace de anclaje dentro de la etiqueta div de nuestro html:

<div class="container">
  <a href="https://google.com" class="link">Google</h1>
</div>

Para alinear un enlace de anclaje al lado derecho de la página, agregue el display:flex Y justify-content: flex-end a la clase ancla CSS.

"justify-content:flex-end" colocó el enlace de anclaje al final del contenedor.

Aquí un ejemplo:

<div class="container">
  <a href="https://google.com" class="link">Google</a>
</div>

CSS:

    display: flex;
    justify-content: flex-end;
}

o podemos agregar los estilos en línea al elemento ancla usando el style atributo en HTML.

<div class="container">
  <a href="https://google.com" style="display: flex;justify-content: flex-end;">
   Google
  </a>
</div>

También podemos usar posicionamiento absoluto en css para posicionar el ancla <a> enlace al lado derecho de una página.

Aquí un ejemplo:

<div class="container">
  <a href="https://google.com" class="link">Google</a>
</div>
.link{
   position:absolute;
   right:0%;
}
  1. Aquí hemos añadido position:absolute a la clase CSS del elemento ancla, de modo que el elemento salga del flujo normal del documento y se posicione en su padre relativo (por ejemplo, cuerpo o elemento padre).

  2. EL right:0% coloca el elemento en el lado derecho del contenedor.

Si quieres conocer otros artículos parecidos a CSS: cómo alinear un enlace de anclaje al lado derecho de una página puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas