I HTML er ikoner for sosiale medier koblingene til sosiale mediesider, representert i vektorbilder. Disse ikonene lar deg hoppe på sosiale mediesider ved å klikke på dem. CSS tillater deg å tilpasse dem i henhold til dine preferanser. Det er forskjellige egenskaper som brukes til å tilpasse vektorbilder av ikoner, for eksempel farge, tekstdekorasjon, fontstørrelse og mange flere. Du kan også angi justeringen av de sosiale medieikonene.

I denne artikkelen vil vi lære metoden for å sentrere sosiale medier -ikoner som bruker:

• “Tekstalign”
• “margin”
• “Nett”
• “Flex”

For å justere de sosiale medieikonene i sentrum av HTML -elementet, er det først viktig for å lære metoden, legg til sosiale medier -ikoner i HTML. For å gjøre det, følg de gitte trinnene.

Trinn 1: Legg til sosiale medieikoner i HTML

For å legge til de sosiale medieikonene i HTML, legg først til den gitte nedenfor -lenken i HTML -overskriften. Dette er en lenke til nettbiblioteket som heter “Font-awesome”Pleide å hente ikoner. Det er mer enn 1600 vektorikoner du fritt kan bruke på nettstedet ditt og tilpasse det enkelt ved å bruke CSS.

Html

Etter å ha lagt til lenken i overskriften til HTML, oppretter vi en beholder med klassen som er kalt som "div”Og legg til overskrift

inne i taggen. Her vil vi lage en underdiv og tildele klassenavnet som “ikoner”.

Inne i underdiven vil vi legge til fire ikoner ved hjelp av taggen. I “href”, Vi vil gi koblingene til ikonene og definere klassenavnet på ikonet der ikonene henter. Her vil vi bruke to klasser, “fa”Og de relaterte ikonene som“fa-twitter”. “fa" står for "Font-awesome”Og“fa-twitter”Er navnet på ikonet. Ved å bruke den samme metoden, vil vi andre tre ikoner i underdiven:

Senter sosiale medier ikoner

Du kan se at de sosiale medieikonene blir lagt til i Div:

Nå vil vi gå til neste trinn for å style Div og sosiale medier -ikoner.

Trinn 2: Style Div & Social Media -ikoner ved hjelp av CSS

I CSS -filen, bruk ".div”For å få tilgang til den opprettede beholderen i HTML. Her, sett høyden på diven som "250px”. For å style div, legg til en bakgrunnsfarge som "RGB (0, 0, 0)”Og sett grensebredden som“7px”, Stil som“dobbelt”, Og farge som“RGB (2, 217, 255)”. Vi vil også sette fargen på overskriften som "RGB (2, 217, 255)”.

CSS

.div
Høyde: 250px;
Bakgrunn: RGB (0, 0, 0);
Grense: 7px dobbel RGB (0, 217, 255);
Farge: RGB (0, 217, 255);

Her kan du se at DIV er stylet, men ikonene har fortsatt samme stil:

Nå vil vi style ikonene ved hjelp av CSS.

For å gjøre det, vil vi bruke “.fa”For å få tilgang til alle fire ikoner og style dem deretter. Vi vil sette skriftstørrelsen på ikonene som “30px”Bredde som“30px”For å skape rom mellom ikoner og“tekstdekorasjon”Eiendom som“ingen”For å fjerne understreken fra lenkene.

Etter det vil vi bruke den andre klassen av ikonene “.fa-twitter”,“.fa-whatsapp”,“.fa-snapchat”Og“.FA-Instagram”For å sette fargen på disse ikonene annerledes. Her vil vi sette fargen på Twitter -ikonet som “RGB (28, 150, 232)”, Whatsapp som“RGB (69, 198, 85)”, Snapchat som“RGB (247, 247, 0)”, Og Instagram som“RGB (246, 1, 140)”:

.fa
Font-størrelse: 30px;
Bredde: 30px;
Tekstdekorasjon: Ingen;

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

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

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

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

Følgende bilde viser at både div og ikoner er stylet:

Trinn 3: Senter sosiale medier ikoner ved hjelp av CSS

Nå vil vi flytte til neste trinn der vi må sentrum samkjøre de sosiale medieikonene ved å bruke fire forskjellige metoder. Så. La oss starte med den første.

Metode 1: Center sosiale medier ikoner ved bruk av “tekst-align”

For å sentrere de sosiale medieikonene, vil vi bruke “Tekstalign”Eiendom til CSS. Den spesifiserer den horisontale justeringen av tekst i HTML -elementene, for eksempel å justere venstre, høyre, sentrum og rettferdiggjøre.

Syntaks

Syntaksen til den tekstjusterte egenskapen er:

tekst-align: venstre | høyre | senter | rettferdiggjør

Beskrivelsen av de ovennevnte verdiene er gitt nedenfor:

• venstre: Det er standardverdien for den tekst-justerte egenskapen som brukes til å justere teksten på venstre side av HTML-elementet.
• Ikke sant: Den brukes til å justere teksten på høyre side av elementet.
• senter: Den spesifiserer midtpunktet av teksten.
• rettferdiggjøre: Ved å bruke det er ordene spredt til en full linje.

Som en fortsettelse av det forrige eksemplet, la oss justere sosiale medieikoner i sentrum av Div.

Eksempel

I CSS vil vi bruke ".ikon”For å få tilgang til den opprettede beholderen der vi har lagt til sosiale medieikoner og deretter angi verdien av den tekst-justerte egenskapen som“senter”:

.ikoner
tekst-align: sentrum;

Det undervernede bildet indikerer at de sosiale medieikonene stemmer overens i sentrum av diven:

Metode 2: Center sosiale medier ikoner ved bruk av “Grid”

“Nett”Brukes til å justere elementet i en rutenettbeholder. Du kan bruke “vise”Eiendom og angi verdiene som rutenettet til sentrum justerer de ekstra sosiale medieikonene.

Syntaks

Syntaksen til displayegenskapen er:

Display: rutenett;

La oss fortsette eksemplet og justere de sosiale medieikonene.

Eksempel

Her vil vi sette verdien av displayegenskapen som “Nett”For å vise ikoner i en rutenettform. Opprett deretter fire kolonner ved å bruke "rutenett-template-kolonner”Eiendom og setter verdien som“bil”For å la nettleseren beregne bredden av seg selv. Vi vil bruke "kolonne-gap”Eiendom for å lage et gap mellom kolonnene og sette verdien som“10px”. Etter det, sett verdien av eiendommen til rettferdig innhold som “senter”For å vise nettbeholderen i midten av Div:

.ikoner
Display: rutenett;
rutenett-template-kolonner: Auto Auto Auto Auto;
kolonne-gap: 10px;
Justify-Content: Center;

Merk: “vise”,“rutenett-template-kolonner”Og“kolonne-gap”Har blitt brukt til å stille inn ikonene i en rutenettbeholder og“Justify-Content”Brukes til å vise nettbeholderen i midten av DIV.

Du kan se at de sosiale medieikonene vises i sentrum av Div:

Metode 3: Senter på sosiale medier ved bruk av "margin"

For å sentrere sosiale medieikoner, “margin”Eiendom til CSS kan brukes. Denne egenskapen brukes til å lage et gjennomsiktig område rundt et element. Det lar deg sette marginen til et element fra venstre, høyre, topp og bunnsider. Det er en kortfattet eiendom av "margin-venstre”,“margin-høyre”,“margin-topp”, Og“marginbunn" egenskaper. Du kan angi alle fire verdiene i en enkelt linje ved å bruke "margin”Eiendom.

Syntaks

Syntaks for marginegenskapen er gitt nedenfor:

Margin: Lengde | Auto

Beskrivelsen av ovennevnte syntaks for marginegenskapen er gitt nedenfor:

• lengde: Den brukes til å sette marginen manuelt fra venstre, høyre, topp og bunnsiden av elementet.
• Auto: Det lar nettleseren stille marginen rundt et element av seg selv.

Eksempel

Vi vil fortsette de tidligere eksemplene og endre verdiene til grenseegenskapen for å gi div et annet utseende. For å gjøre det, sett verdien av marginegenskapen som “bil”Og bredde som“Fit-content”For å justere ikonene nøyaktig i sentrum av div:

.ikoner
Margin: Auto;
Bredde: Fit-Content;

Den medfølgende koden viste at de sosiale medieikonene på linje i sentrum av Div:

Metode 4: Center sosiale medier ikoner ved bruk av "flex"

I CSS, “Flex”Er verdien for visningsegenskapen. Det gjør at innholdet eller elementene kan være fleksible og justerbart. CSSs flexverdi sikrer at elementer er ordnet effektivt ved å skape like mellomrom mellom dem.

Syntaks

Display: Flex

I ovennevnte syntaks, “Flex”Vil bli spesifisert som verdien av“vise”Eiendom.

Eksempel

Vi vil bruke visningsegenskapen som "Flex”Og sett gapet mellom ikoner som“5px" bruker "mellomrom”Eiendom. Etter det, bruk Justify-Content og angi verdien som “senter”:

.ikoner
Display: Flex;
Gap: 5px;
Justify-Content: Center;

Ved hjelp av koden over oppnås følgende utgang:

Du kan også stille inn sosiale medieikoner i sentrum av Div både vertikalt eller horisontalt ved å bruke “Flex”Verdi for visningsegenskapen. For å gjøre det, bruk "Align-varen”Eiendom som“senter”Og sett høyden som“250px”For å vise ikonet vertikalt sentrum i Div:

.ikoner
..
Align-elementer: sentrum;
Høyde: 250px;

Her er resultatet som viser at de sosiale medieikonene er i sentrum av Div både vertikalt og horisontalt:

Det er det! Vi forklarte metoden for å sentrere de sosiale medieikonene ved å bruke fire forskjellige metoder.

Konklusjon

Sosiale medieikoner er på linje i sentrum av DIV ved å bruke fire forskjellige metoder for CSS, som er "Nett”Og“Flex”Verdier for visningsegenskapen,“Tekstalign”Og“margin" egenskaper. Du kan også stille inn det sosiale medieikon -senteret vertikalt ved å bruke "Flex”Verdien av displayegenskapen. I denne guiden har vi forklart disse fire metodene i detalj og gitt eksempler på hver metode for å sentrere sosiale medieikoner ved hjelp av CSS.
[/cc]