Como centralizar links no CSS

Qualquer elemento que adicionamos em HTML é exibido no canto superior esquerdo da tela por padrão. Embora você possa modificar a posição padrão de um elemento usando diferentes propriedades CSS. Da mesma forma, quando adicionamos um link, ele é exibido em sua posição padrão, mas você pode centralizar alinhá -los usando as propriedades CSS.

Existem dois métodos para centralizar o link:

• Links centrais no CSS usando o “alinhamento de texto" propriedade
• Links centrais no CSS usando o “margem" propriedade

Neste artigo, explicaremos os dois métodos para centralizar o link. Então vamos começar!

Método 1: Links centrais no CSS usando a propriedade de alinhamento de texto

Para centralizar os links no HTML, usaremos o “alinhamento de textoPropriedade do CSS. O "alinhamento de texto”A propriedade no CSS é utilizada para ajustar o alinhamento do texto como esquerda, direita, centro e justificar o alinhamento.

Sintaxe

A sintaxe da propriedade de alinhamento de texto é:

Alinhamento de texto: Valor

No lugar de "valor”, Você pode definir o alinhamento do texto como esquerda, direita, centro e justificar.

Agora, usaremos o “alinhamento de texto”Para alinhar o centro dos links fornecidos.

Exemplo

Para centralizar um link em uma página da web, adicionaremos um link em html dentro da tag. Para fazer isso, use a tag para definir um hiperlink e fornecer o endereço do site necessário. Depois disso, especifique o nome do link. No nosso caso, adicionamos o link ao nosso site Linuxhint.

Html

Linuxhint

A imagem abaixo fornecida indica que o link é adicionado, que está posicionado no lado esquerdo por padrão:

Agora vá para o CSS para centralizar o link.

Aqui, vamos usar “a”Para acessar o link adicionado. Depois disso, defina o valor do alinhamento de texto como “Centro”E exibir como“bloquear”. Como resultado, o elemento será adicionado como um elemento de bloco, começando em uma nova linha e adotando toda a largura.

CSS

a
Alinhamento de texto: centro;
exibição: bloco;

Observação: A propriedade CSS Text-Align não funciona sozinha para centralizar a tag. Portanto, você deve usar o “mostrar”Propriedade e defina seu valor“bloquear”Para centralizar o link.

Agora, vá para o HTML e execute -o para ver o seguinte resultado. Aqui, você pode ver que o link está alinhado no centro da página da web:

Vamos para o segundo método para alinhar o link no centro.

Método 2: Links centrais no CSS usando a propriedade "margem"

No CSS, o “margem”A propriedade é utilizada para centralizar o link. É a propriedade abreviada de “margem-esquerda","Margem-direita","margin-top", e "Margin-Bottom”Propriedades. Você pode definir os valores de todas as propriedades dadas em uma única linha.

Sintaxe

A sintaxe da propriedade de margem é:

Margem: Auto | superior direito esquerdo inferior esquerdo

A descrição da sintaxe fornecida acima é dada abaixo:

• auto: É usado para definir elementos de acordo com o navegador.
• principal: É usado para definir a margem do topo.
• certo: É usado para definir a margem da direita.
• botão: É usado para definir a margem de baixo.
• esquerda: É usado para definir a margem da esquerda.

Observação: Especificar dois valores significarão a margem de cima e inferior e a margem da esquerda e da direita; No entanto, se um valor for agregado, a margem será aplicada a todos os quatro lados.

Vamos passar para o exemplo, onde centralizaremos um link usando o “margem" propriedade.

Exemplo

Em primeiro lugar, defina o valor da propriedade de exibição como “bloquear”E a largura como“70px”. Depois disso, aplique a propriedade de margem e defina seu valor como “auto”:

a
exibição: bloco;
Largura: 70px;
margem: automático;

Observação: O "mostrar" e "larguraA propriedade é necessária para definir; Caso contrário, o “margem”Propriedade não funcionará. O valor da propriedade de largura pode ser definido de acordo com a resolução da tela e o comprimento do texto.

Você pode ver na imagem dada que o link está centrado com sucesso:

É isso! Explicamos os métodos para centralizar o link.

Conclusão

O "alinhamento de texto" e "margem”A propriedade é usada para centralizar o link com a contribuição do“mostrar" e "largura" propriedade. A propriedade Display é necessária juntamente com a propriedade de alinhamento de texto, enquanto usa a propriedade da margem, as propriedades de exibição e largura são obrigatórias para centralizar o link. Este guia discutiu diferentes métodos para centralizar um link no CSS.