Centrar varios enlaces en HTML
-
Utilice la etiqueta HTML
<center>para centrar varios enlaces HTML -
Use la propiedad CSS
text-align: centerpara centrar múltiples enlaces HTML
Este artículo nos enseñará a centrar uno o más enlaces HTML. En HTML, podemos usar la etiqueta <a> para crear el enlace y asignar la URL al atributo src.
Utilice la etiqueta HTML <center> para centrar varios enlaces HTML
La forma más sencilla de centrar un elemento en el HTML es la etiqueta <center>. Podemos poner todos los elementos dentro de la etiqueta <center> </center>, que necesitamos mostrar en el centro.
Por ejemplo, hemos creado cuatro enlaces y los hemos insertado dentro de la etiqueta <center> para mostrarlos en el centro.
Código HTML:
<center>
<a href="#">About Us</a>
<a href="#">Contact Us</a>
<a href="#">HTML</a>
<a href="#">CSS</a>
</center>
En el resultado anterior, los usuarios pueden ver que todos los enlaces aparecen en el medio de la página web.
Use la propiedad CSS text-align: center para centrar múltiples enlaces HTML
También podemos centrar los elementos HTML usando la propiedad text-align de CSS.
En el siguiente ejemplo, hemos creado cuatro enlaces y los hemos agregado dentro del elemento <div>. A continuación, hemos aplicado la propiedad CSS text-align: center al elemento <div>, que centrará todos los elementos <div>.
Código HTML:
<div>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>
Código CSS:
div{
text-align: center;
}
Si los usuarios quieren mostrar todos los enlaces línea por línea en una sola columna, pueden agregar las propiedades CSS display: flex y flex-direction: column para el estilo del elemento <div>.
Código HTML:
<div>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>
Código CSS:
div{
display: flex;
flex-direction: column;
text-align: center;
}
En el resultado anterior, los usuarios pueden observar que todos los enlaces aparecen en una sola columna y la columna aparece en el centro de la pantalla.
