Hay dos métodos para centrar el enlace:
- Centrar enlaces en CSS usando el “ texto alineado ' propiedad
- Centrar enlaces en CSS usando el “ margen ' propiedad
En este artículo, explicaremos ambos métodos para centrar el enlace. Entonces, ¡comencemos!
Método 1: Centrar enlaces en CSS usando la propiedad de alineación de texto
Para centrar los enlaces en HTML, usaremos el “ texto alineado ” propiedad de CSS. Los ' texto alineado La propiedad ” en CSS se utiliza para ajustar la alineación del texto, como izquierda, derecha, centro y alineación justificada.
Sintaxis
La sintaxis de la propiedad text-align es:
texto alineado : valor
En lugar de ' valor ”, puede establecer la alineación del texto, como izquierda, derecha, centro y justificar.
Ahora, usaremos el ' texto alineado ” para alinear al centro 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 proporcione 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
< cuerpo >< a href = “https://linuxhint.com/” > linux < / a >
< / cuerpo >
La imagen proporcionada a continuación indica que se agrega el enlace que se coloca en el lado izquierdo de forma predeterminada:
Ahora muévete al CSS para centrar el enlace.
Aquí, usaremos “ a ” para acceder al enlace agregado. Después de eso, establezca el valor de alineación de texto 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 {texto alineado : centro ;
monitor : bloquear ;
}
Nota: La propiedad de alineación de texto CSS no funciona sola para centrar la etiqueta. Por lo tanto, debe utilizar el “ monitor ” propiedad y establecer su valor “ bloquear ” para centrar el enlace.
Ahora, vaya al HTML y ejecútelo 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: Centro de enlaces en CSS usando la propiedad 'margen'
En CSS, el “ margen La propiedad ” se utiliza para centrar el enlace. Es la propiedad abreviada de “ margen izquierdo ”, “ margen derecho ”, “ margen superior ', y ' margen inferior ' 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 | parte superior Correcto abajo izquierdaLa descripción de la sintaxis proporcionada anteriormente se proporciona a continuación:
- auto: Se utiliza para configurar elementos según el navegador.
- parte superior: Se utiliza para establecer el margen desde la parte superior.
- Correcto: Se utiliza para establecer el margen desde la derecha.
- botón: Se utiliza para establecer el margen desde la parte inferior.
- izquierda: Se utiliza para establecer el margen desde la izquierda.
Nota: Especificar dos valores significará el margen desde arriba y desde abajo y el margen desde la izquierda y la 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 {monitor : bloquear ;
ancho : 70px ;
margen : auto ;
}
Nota: Los ' monitor ' 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 está centrado con éxito:
¡Eso es todo! Explicamos los métodos para centrar el enlace.
Conclusión
Los ' texto alineado ' y ' margen La propiedad ” se utiliza para centrar el enlace con la contribución del “ monitor ' y ' ancho ' propiedad. La propiedad de visualización es necesaria junto con la propiedad de alineación de texto, mientras que al usar la propiedad de margen, las propiedades de visualización y ancho son obligatorias para centrar el enlace. Esta guía ha discutido diferentes métodos para centrar un enlace en CSS.