No HTML, os ícones de mídia social são os links para sites de mídia social, representados em imagens vetoriais. Esses ícones permitem que você pule em sites de mídia social clicando neles. CSS permite que você os personalize de acordo com suas preferências. Existem diferentes propriedades utilizadas para personalizar imagens vetoriais de ícones, como cor, decoração de texto, tamanho de fonte e muito mais. Você também pode definir o alinhamento dos ícones de mídia social.

Neste artigo, aprenderemos o método para centralizar os ícones de mídia social usando:

• ““alinhamento de texto”
• ““margem”
• ““grade”
• ““flex”

Para alinhar os ícones de mídia social no centro do elemento HTML, primeiro, é importante aprender o método Adicionar ícones de mídia social em HTML. Para fazer isso, siga as etapas fornecidas.

Etapa 1: Adicione ícones de mídia social em HTML

Para adicionar os ícones de mídia social no HTML, primeiro adicione o link abaixo no cabeçalho do HTML. Este é um link para a biblioteca online chamada “Fonte-incrível”Usado para buscar ícones. Existem mais de 1600 ícones de vetor que você pode usar livremente em seu site e personalizá -lo facilmente usando CSS.

Html

Depois de adicionar o link no cabeçalho do HTML, criaremos um contêiner com a classe chamada como “div”E adicione o cabeçalho

dentro da tag. Aqui, criaremos um subdiv e atribuiremos o nome da classe como “ícones”.

Dentro do subdiv, adicionaremos quatro ícones usando a tag. Em "Href”, Daremos os links dos ícones e definiremos o nome da classe do ícone de onde os ícones são buscados. Aqui, usaremos duas classes, “fa”E os ícones relacionados como“fa-twitter”. O "fa" apoia "Fonte-incrível" e "fa-twitter”É o nome do ícone. Usando o mesmo método, outros três ícones no subdiv:

Ícones de mídia social central

Você pode ver que os ícones de mídia social são adicionados na div:

Agora, passaremos para o próximo passo para estilizar os ícones da div e mídia social.

Etapa 2: Estilo Div e ícones de mídia social usando CSS

No arquivo CSS, use “.div”Para acessar o contêiner criado em HTML. Aqui, defina a altura da div como “250px”. Para estilizar a div, adicione uma cor de fundo como “RGB (0, 0, 0)”E defina a largura da borda como“7px", Estilo como"dobro”E cor como“RGB (2, 217, 255)”. Também definiremos a cor do cabeçalho como “RGB (2, 217, 255)”.

CSS

.div
Altura: 250px;
Antecedentes: RGB (0, 0, 0);
borda: 7px duplo RGB (0, 217, 255);
Cor: RGB (0, 217, 255);

Aqui, você pode ver que a div está estilizada, mas os ícones ainda têm o mesmo estilo:

Agora, vamos estilizar os ícones usando CSS.

Para fazer isso, usaremos “.fa”Para acessar todos os quatro ícones e estilizá -los de acordo. Vamos definir o tamanho da fonte dos ícones como “30px"Largura como"30px”Para criar espaço entre ícones e o“decoração de texto"Propriedade como"nenhum”Para remover o sublinhado dos links.

Depois disso, usaremos a segunda classe dos ícones “.fa-twitter",".fa-whatsapp",".FA-SNAPCHAT" e ".FA-Instagram”Para definir a cor desses ícones de maneira diferente. Aqui, definiremos a cor do ícone do Twitter como “RGB (28, 150, 232)", WhatsApp como"RGB (69, 198, 85)", Snapchat como"RGB (247, 247, 0)”, E Instagram como“RGB (246, 1, 140)”:

.fa
tamanho da fonte: 30px;
Largura: 30px;
Decoração de texto: Nenhum;

.fa-twitter
Cor: RGB (28, 150, 232);

.fa-whatsapp
Cor: RGB (69, 198, 85);

.fa-snapchat
Cor: RGB (247, 247, 0);

.fa-instagram
Cor: RGB (246, 1, 140);

A imagem a seguir mostra que a div e os ícones são estilizados:

Etapa 3: Ícones de mídia social central usando CSS

Agora, passaremos para a próxima etapa em que precisamos alinhar os ícones de mídia social usando quatro métodos diferentes. Então. Vamos começar com o primeiro.

Método 1: Ícones do centro de mídia social usando "alinhamento de texto"

Para centralizar os ícones de mídia social, usaremos o “alinhamento de textoPropriedade do CSS. Ele especifica o alinhamento horizontal do texto nos elementos HTML, como alinhar à esquerda, direita, centro e justificar.

Sintaxe

A sintaxe da propriedade de alinhamento de texto é:

Alinhamento de texto: esquerda | Centro | Justificar

A descrição dos valores fornecidos acima é dada abaixo:

• esquerda: É o valor padrão da propriedade de alinhamento de texto usado para ajustar o texto no lado esquerdo do elemento HTML.
• certo: É utilizado para alinhar o texto no lado direito do elemento.
• Centro: Especifica o alinhamento central do texto.
• justificar: Ao usá -lo, as palavras são espalhadas em uma linha completa.

Como continuação do exemplo anterior, vamos alinhar ícones de mídia social no centro da div.

Exemplo

No CSS, usaremos o “.ícone”Para acessar o contêiner criado no qual adicionamos ícones de mídia social e, em seguida, defina o valor da propriedade de alinhamento de texto como“Centro”:

.ícones
Alinhamento de texto: centro;

A imagem abaixo fornecida indica que os ícones de mídia social estão alinhados no centro da div:

Método 2: Ícones do centro de mídia social usando “grade”

““grade”É usado para ajustar o elemento em um recipiente de grade. Você pode usar o “mostrar”Propriedade e defina seus valores como a grade para o centro alinhar os ícones de mídia social adicionados.

Sintaxe

A sintaxe da propriedade Display é:

Exibição: grade;

Vamos continuar o exemplo e alinhar os ícones de mídia social.

Exemplo

Aqui, definiremos o valor da propriedade de exibição como “grade”Para exibir ícones em forma de grade. Em seguida, crie quatro colunas usando o “colunas de grade-template”Propriedade e defina seu valor como“auto”Para permitir que o navegador calcule a largura por si só. Vamos utilizar o “Gap de coluna”Propriedade para criar uma lacuna entre as colunas e definir seu valor como“10px”. Depois disso, defina o valor da propriedade Justify-Content como “Centro”Para exibir o recipiente de grade no centro da div:

.ícones
Exibição: grade;
colunas de grade-template: automático automático automático;
coluna Gap: 10px;
Justify-Content: Center;

Observação: O "mostrar","colunas de grade-template" e "Gap de coluna”Foram usados ​​para definir os ícones em um recipiente de grade e o“Justify-Content”É utilizado para exibir o recipiente de grade no centro da div.

Você pode ver que os ícones de mídia social são exibidos no centro da div:

Método 3: Ícones do centro de mídia social usando "margem"

Para centralizar os ícones de mídia social, o “margem”A propriedade do CSS pode ser utilizada. Esta propriedade é usada para criar uma área transparente em torno de um elemento. Ele permite que você defina a margem de um elemento das laterais esquerda, direita, superior e inferior. É uma propriedade abreviada de “margem-esquerda","Margem-direita","margin-top", e "Margin-Bottom”Propriedades. Você pode definir todos os quatro valores em uma única linha usando o “margem" propriedade.

Sintaxe

A sintaxe da propriedade de margem é dada abaixo:

Margem: Comprimento | Auto

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

• comprimento: É usado para definir a margem manualmente a partir do lado esquerdo, direito, superior e inferior do elemento.
• auto: Ele permite que o navegador defina a margem em torno de um elemento por si só.

Exemplo

Continuaremos os exemplos anteriores e alteraremos os valores da propriedade da fronteira para dar à div uma aparência diferente. Para fazer isso, defina o valor da propriedade da margem como “auto"E largura como"conteúdo de ajuste”Para alinhar os ícones exatamente no centro da div:

.ícones
margem: automático;
Largura: conteúdo de ajuste;

O código fornecido mostrou que os ícones de mídia social alinhados no centro da div:

Método 4: Ícones do centro de mídia social usando "flex"

No CSS, “flex”É o valor definido para a propriedade de exibição. Ele permite que o conteúdo ou os elementos sejam flexíveis e ajustáveis. O valor flexível do CSS garante.

Sintaxe

Exibição: flex

Na sintaxe acima mencionada, “flex”Será especificado como o valor do“mostrar" propriedade.

Exemplo

Utilizaremos a propriedade Display como “flex”E defina a lacuna entre os ícones como“5px”Usando o“brecha" propriedade. Depois disso, use o conteúdo justificado e defina seu valor como “Centro”:

.ícones
exibição: flex;
Gap: 5px;
Justify-Content: Center;

Usando o código acima, a seguinte saída é obtida:

Você também pode definir os ícones de mídia social no centro da div, tanto vertical quanto horizontalmente usando o “flex”Valor para a propriedade Display. Para fazer isso, use o “Align-iteem"Propriedade como"Centro”E defina a altura como“250px”Para exibir o ícone verticalmente central na div:

.ícones
..
alinhado-itens: centro;
Altura: 250px;

Aqui está o resultado que demonstra que os ícones de mídia social estão no centro da div, vertical e horizontalmente:

É isso! Explicamos o método para centralizar os ícones de mídia social usando quatro métodos diferentes.

Conclusão

Os ícones de mídia social estão alinhados no centro da div usando quatro métodos diferentes de CSS, que são os “grade" e "flex”Valores da propriedade Display, o“alinhamento de texto" e "margem”Propriedades. Você também pode definir o centro de ícones de mídia social verticalmente usando o “flex”Valor da propriedade Display. Neste guia, explicamos esses quatro métodos em detalhes e fornecemos exemplos de cada método para centralizar os ícones de mídia social usando CSS.
[/cc]