Cómo centrar los enlaces en CSS

Cualquier elemento que agregamos en HTML se muestra en la esquina superior izquierda de la pantalla de forma predeterminada. Aunque, puede modificar la posición predeterminada de un elemento utilizando diferentes propiedades CSS. Del mismo modo, cuando agregamos un enlace, se muestra en su posición predeterminada, pero puede alinearlos con las propiedades CSS.

Hay dos métodos para centrar el enlace:

• Enlaces centrales en CSS usando el "texto alineado" propiedad
• Enlaces centrales en CSS usando el "margen" propiedad

En este artículo, explicaremos ambos métodos para centrar el enlace. Entonces, comencemos!

Método 1: Enlaces centrales en CSS utilizando la propiedad de alineación de texto

Para centrar los enlaces en HTML, usaremos el "texto alineado"Propiedad de CSS. El "texto alineadoLa propiedad en CSS se utiliza para ajustar la alineación de texto como la izquierda, la derecha, el centro y la alineación de justificación.

Sintaxis

La sintaxis de la propiedad de alineación de texto es:

Text-Align: valor

En lugar de "valor", Puede establecer la alineación de texto como izquierda, derecha, centro y justificar.

Ahora, usaremos el "texto alineado"Centrar alinear los enlaces dados.

Ejemplo

Para centrar un enlace en una página web, agregaremos un enlace en HTML dentro de la etiqueta. Para hacerlo, use la etiqueta para definir un hipervínculo y dar la dirección del sitio requerido. Después de eso, especifique el nombre del enlace. En nuestro caso, hemos agregado el enlace a nuestro sitio web de Linuxhint.

Html

Linuxhint

La imagen proporcionada a continuación indica que se agrega el enlace que se coloca en el lado izquierdo de forma predeterminada:

Ahora muévase al CSS para centrar el enlace.

Aquí, usaremos "a"Para acceder al enlace agregado. Después de eso, establezca el valor de Text-Align como "centro"Y mostrar como"bloquear". Como resultado, el elemento se agregará como un elemento de bloque, comenzando en una nueva línea y ocupando todo el ancho.

CSS

a
Text-Align: Center;
bloqueo de pantalla;

Nota: La propiedad de alineación de texto CSS no funciona sola para centrar la etiqueta. Por lo tanto, debes usar el "mostrar"Propiedad y establecer su valor"bloquear"Para centrar el enlace.

Ahora, muévase al HTML y ejecutelo para ver el siguiente resultado. Aquí, puede ver que el enlace está alineado en el centro de la página web:

Pasemos al segundo método para alinear el enlace en el centro.

Método 2: Enlaces centrales en CSS utilizando la propiedad "Margen"

En CSS, el "margenLa propiedad se utiliza para centrar el enlace. Es la propiedad abreviada de "margen de pesa","margen de derecha","margen-top", y "margen" propiedades. Puede establecer los valores de todas las propiedades dadas en una sola línea.

Sintaxis

La sintaxis de la propiedad de margen es:

Margen: Auto | Arriba a la parte inferior derecha a la izquierda

La descripción de la sintaxis proporcionada anteriormente se da a continuación:

• auto: Se usa para establecer elementos de acuerdo con el navegador.
• arriba: Se usa para establecer el margen desde la parte superior.
• bien: Se usa para establecer el margen de la derecha.
• botón: Se usa para establecer el margen desde la parte inferior.
• izquierda: Se usa para establecer el margen desde la izquierda.

Nota: Especificar dos valores significará el margen de arriba e inferior y el margen de izquierda a derecha; Sin embargo, si se agrega un valor, el margen se aplicará a los cuatro lados.

Pasemos al ejemplo, donde centraremos un enlace usando el "margen" propiedad.

Ejemplo

En primer lugar, establezca el valor de la propiedad de visualización como "bloquear"Y el ancho como"70px". Después de eso, aplique la propiedad de margen y establezca su valor en "auto":

a
bloqueo de pantalla;
Ancho: 70px;
margen: auto;

Nota: El "mostrar" y "ancho"La propiedad es necesaria para establecer; De lo contrario, el "margen"La propiedad no funcionará. El valor de la propiedad de ancho se puede establecer de acuerdo con la resolución de la pantalla de visualización y la longitud del texto.

Puede ver en la imagen dada que el enlace se centra con éxito:

Eso es todo! Explicamos los métodos para centrar el enlace.

Conclusión

El "texto alineado" y "margen"La propiedad se utiliza para centrar el enlace con la contribución del"mostrar" y "ancho" propiedad. La propiedad de visualización es necesaria junto con la propiedad de alineación de texto, mientras usa la propiedad de margen, tanto las propiedades de visualización como de ancho son obligatorias para centrar el enlace. Esta guía ha discutido diferentes métodos para centrar un enlace en CSS.