In HTML, le icone dei social media sono i collegamenti ai siti di social media, rappresentati nelle immagini vettoriali. Queste icone ti consentono di saltare sui siti di social media facendo clic su di esse. CSS ti consente di personalizzarli in base alle tue preferenze. Esistono diverse proprietà che vengono utilizzate per personalizzare le immagini vettoriali di icone, come colore, decorazione del testo, dimensioni dei caratteri e molte altre. Puoi anche impostare l'allineamento delle icone dei social media.

In questo articolo, impareremo il metodo per centrare le icone dei social media usando:

• "allineamento"
• "margine"
• "griglia"
• "flettere"

Per allineare le icone dei social media al centro dell'elemento HTML, in primo luogo, è importante apprendere il metodo Aggiungi icone di social media in HTML. Per fare ciò, segui i passaggi indicati.

Passaggio 1: Aggiungi icone di social media in HTML

Per aggiungere le icone dei social media nell'HTML, aggiungi prima il collegamento indicato nell'intestazione dell'HTML. Questo è un link alla biblioteca online denominata "Font-Awesome"Utilizzato per recuperare le icone. Ci sono più di 1600 icone vettoriali che puoi utilizzare liberamente sul tuo sito Web e personalizzarlo facilmente utilizzando CSS.

Html

Dopo aver aggiunto il collegamento nell'intestazione di HTML, creeremo un contenitore con la classe denominata "div"E aggiungi l'intestazione

All'interno del tag. Qui creeremo un sub-div e assegneremo il nome della classe come "icone".

All'interno del sub-div, aggiungeremo quattro icone usando il tag. In "Href", Daremo i collegamenti delle icone e definiremo il nome della classe dell'icona da dove vengono recuperate le icone. Qui useremo due classi, "fa"E le icone correlate come"fa-twitter". IL "fa" sta per "Font-Awesome" E "fa-twitter"È il nome dell'icona. Usando lo stesso metodo, saremo altre tre icone nel sub-div:

Icone dei social media centrali

Puoi vedere che le icone dei social media sono aggiunte nel Div:

Ora passeremo al passo successivo per modellare le icone di div e social media.

Passaggio 2: icone di Style Div e social media usando CSS

Nel file CSS, usa ".div"Per accedere al contenitore creato in HTML. Qui, imposta l'altezza del div come "250px". Per modellare il div, aggiungi un colore di sfondo come "RGB (0, 0, 0)"E imposta la larghezza del confine come"7px", Stile come"Doppio”, E colore come"RGB (2, 217, 255)". Imposteremo anche il colore dell'intestazione come "RGB (2, 217, 255)".

CSS

.div
Altezza: 250px;
Background: RGB (0, 0, 0);
Bordo: 7px Double RGB (0, 217, 255);
Colore: RGB (0, 217, 255);

Qui, puoi vedere che il div è in stile ma le icone hanno ancora lo stesso stile:

Ora, modelleremo le icone usando CSS.

Per farlo, useremo ".fa"Per accedere a tutte e quattro le icone e modellarle di conseguenza. Imposteremo le dimensioni del carattere delle icone come "30px"Larghezza come"30px"Per creare spazio tra icone e"decorazione del testo"Proprietà come"nessuno"Per rimuovere la sottolineatura dai collegamenti.

Dopodiché, useremo la seconda classe delle icone ".fa-twitter",".fa-whatsapp",".fa-snapchat" E ".FA-Instagram"Per impostare il colore di queste icone in modo diverso. Qui, imposteremo il colore dell'icona di Twitter come "RGB (28, 150, 232)", WhatsApp come"RGB (69, 198, 85)", Snapchat come"RGB (247, 247, 0)", E Instagram come"RGB (246, 1, 140)":

.fa
Font-size: 30px;
larghezza: 30px;
DECORAZIONE DEL TESTO: Nessuno;

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

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

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

.fa-isstagram
Colore: RGB (246, 1, 140);

La seguente immagine mostra che sia il div e le icone che sono in stile:

Passaggio 3: icone dei social media centrali usando CSS

Ora passeremo al passo successivo in cui dobbiamo allineare le icone dei social media usando quattro diversi metodi. COSÌ. Cominciamo con il primo.

Metodo 1: icone di social media centrali usando "allineate text"

Per centrare le icone dei social media, useremo il "allineamento"Proprietà di CSS. Specifica l'allineamento orizzontale del testo negli elementi HTML, come allineare a sinistra, a destra, al centro e giustifica.

Sintassi

La sintassi della proprietà allineata al testo è:

Testo-align: sinistra | destra | Centro | Justify

Di seguito è riportata la descrizione dei valori sopra forniti:

• Sinistra: È il valore predefinito della proprietà allineata al testo utilizzato per regolare il testo sul lato sinistro dell'elemento HTML.
• Giusto: Viene utilizzato per allineare il testo sul lato destro dell'elemento.
• centro: Specifica l'allineamento centrale del testo.
• giustificare: Usandolo, le parole sono sparse in una linea completa.

Come continuazione dell'esempio precedente, allineiamo le icone dei social media al centro del div.

Esempio

In CSS useremo il ".icona"Per accedere al contenitore creato in cui abbiamo aggiunto icone dei social media e quindi impostare il valore della proprietà allineata dal testo come"centro":

.icone
Testo-align: centro;

L'immagine sotto fornita indica che le icone dei social media si allineano al centro del div:

Metodo 2: icone dei social media centrali usando "griglia"

"griglia"Viene utilizzato per regolare l'elemento in un contenitore a griglia. Puoi usare il "Schermo"Proprietà e imposta i suoi valori come griglia per allineare le icone dei social media aggiunti.

Sintassi

La sintassi della proprietà del display è:

display: griglia;

Continuiamo l'esempio e allineiamo le icone dei social media.

Esempio

Qui, imposteremo il valore della proprietà di visualizzazione come "griglia"Per visualizzare le icone in forma di griglia. Quindi, crea quattro colonne usando "colonne a griglia"Proprietà e impostare il suo valore come"auto"Per consentire al browser di calcolare la larghezza da solo. Utilizzeremo il "colonna-gap"Proprietà per creare un divario tra le colonne e impostare il suo valore come"10px". Successivamente, imposta il valore della proprietà giustificata come "centro"Per visualizzare il contenitore della griglia al centro del div:

.icone
display: griglia;
colonne a griglia-template: auto automatica automatica;
colonna-gap: 10px;
giustificare contento: centro;

Nota: IL "Schermo","colonne a griglia" E "colonna-gap"Sono stati usati per impostare le icone in un contenitore a griglia e"giustificare il contenuto"Viene utilizzato per visualizzare il contenitore della griglia al centro del div.

Puoi vedere che le icone dei social media sono visualizzate al centro del div:

Metodo 3: icone dei social media centrali usando "margine"

Per centrare le icone dei social media, "margine"La proprietà di CSS può essere utilizzata. Questa proprietà viene utilizzata per creare un'area trasparente attorno a un elemento. Ti consente di impostare il margine di un elemento dai lati sinistro, destro, superiore e inferiore. È una proprietà stensa di "margine-sinistra","margine-destra","margine-top", E "margin-bottom" proprietà. È possibile impostare tutti e quattro i valori in una singola riga usando "margine" proprietà.

Sintassi

La sintassi della proprietà del margine è riportata di seguito:

Margine: lunghezza | auto

Di seguito è riportata la descrizione della sintassi sopra fornita della proprietà margine:

• lunghezza: Viene utilizzato per impostare il margine manualmente da lato sinistro, destro, superiore e inferiore dell'elemento.
• auto: Consente al browser di impostare il margine attorno a un elemento da solo.

Esempio

Continueremo gli esempi precedenti e cambieremo i valori della proprietà di frontiera per dare al Div un aspetto diverso. Per fare ciò, impostare il valore della proprietà margine come "auto"E larghezza come"contento"Per allineare le icone esattamente al centro del Div:

.icone
Margine: auto;
Larghezza: contento fit;

Il codice fornito ha mostrato che le icone dei social media si allinearono al centro del div:

Metodo 4: icone dei social media centrali usando "flex"

In CSS, "flettere"È il valore impostato per la proprietà Visualizza. Consente al contenuto o agli elementi di essere flessibile e regolabile. Il valore flessibile di CSS garantisce che gli elementi siano disposti in modo efficiente creando uguale spazio tra loro.

Sintassi

Visualizza: Flex

Nella sintassi sopra offerta, "flettere"Sarà specificato come valore del"Schermo" proprietà.

Esempio

Utilizzeremo la proprietà del display come "flettere"E impostare il divario tra le icone come"5px" usando il "spacco" proprietà. Successivamente, usa Justify-Content e imposta il suo valore come "centro":

.icone
display: flex;
GAP: 5px;
giustificare contento: centro;

Utilizzando il codice sopra, si ottiene il seguente output:

Puoi anche impostare le icone dei social media al centro del Div sia in verticale che in orizzontale usando il "flettere"Valore per la proprietà Visualizza. Per farlo, usa il "allineare"Proprietà come"centro"E impostare l'altezza come"250px"Per visualizzare l'icona al centro in verticale nel Div:

.icone
..
ALIGE-ITMS: CENTRO;
Altezza: 250px;

Ecco il risultato che dimostra che le icone dei social media sono al centro del Div sia in verticale che in orizzontale:

Questo è tutto! Abbiamo spiegato il metodo per centrare le icone dei social media usando quattro diversi metodi.

Conclusione

Le icone dei social media sono allineate al centro del Div usando quattro diversi metodi di CSS, che sono i "griglia" E "flettere"Valori della proprietà Visualizza, il"allineamento" E "margine" proprietà. Puoi anche impostare l'icona dei social media al centro verticalmente usando il "flettere"Valore della proprietà del display. In questa guida, abbiamo spiegato in dettaglio questi quattro metodi e fornito esempi di ciascun metodo per centrare le icone dei social media usando CSS.
[/cc]