Centrar varios enlaces en 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.