Hvordan du sentrerer en div horisontalt i CSS

I HTML er DIV et essensielt element og brukes for mye i utviklingen av nettsteder. Imidlertid er hovedtingen hvor effektiv en utvikler bruker DIV -elementet for å oppfylle sin formål; Er diven plassert riktig? Krever det å være midtpensjon? Dette er de vanlige spørsmålene som kan lure på i tankene til utviklerne når de tenker på å forbedre utseendet til en webside.

Dette innlegget vil dekke metoden for senter som justerer en div horisontalt ved hjelp av CSS.

Hvordan sentrerer en div horisontalt ved hjelp av CSS?

For å sentrere en div horisontalt, vil vi sjekke ut CSS-egenskapene nedenfor:

• margineiendom
• Stillingseiendom
• Vis eiendom

La oss gå videre og utforske de listede egenskapene en etter en.

Metode 1: Bruk marginegenskaper for å sentrere en div horisontalt i CSS

I CSS, “margin”Eiendom brukes til å skape plass rundt HTML -elementer fra topp, bunn, høyre eller venstre. Vi kan også bruke marginegenskapen til å sentrere elementene, for eksempel DIV.

For å gjøre det, følg det gitte eksemplet.

Eksempel - Hvordan bruke polstring

Her er beholderen til HTML -siden vår, og vi vil justere den i sentrum horisontalt:

I vår CSS -fil vil vi spesifisere “grense”Eiendom som verdi”0.2em solid”For å se vårt divelement, bruk“bredde”Eiendom langs verdien av“50%”For å overstyre standardbredden på diven vår. Til slutt, sett "margin”Eiendom og spesifiser verdien som“bil”For å sentrere divet horisontalt:

Det undergitte bildet indikerer at vi har justert den ekstra diven i sentrum horisontalt:

Metode 2: Bruk posisjonseiendom for å sentrere en div horisontalt i CSS

For å sette posisjonen til forskjellige HTML -elementer, "posisjon”Eiendom til CSS kan brukes. Denne egenskapen må kombineres med "venstre”Eiendom for å sentrere en div horisontalt.

Se på eksemplet for en bedre forståelse.

Eksempel

For å style containeren vår, vil vi bruke “posisjon”Eiendom og setter verdien som“Absolutt”. Deretter spesifiser "venstre”Eiendom med verdien”25%”. Det vil skape ledig plass på venstre side og justere div til sentrum:

Produksjon

La oss nå sjekke ut den siste metoden.

Metode 3: Bruk skjermegenskap for å sentrere en div horisontalt i CSS

“vise”Eiendom kontrollerer hvordan det valgte elementet vil oppføre seg. Denne egenskapen har noen hovedverdier som gir forskjellige funksjoner, for eksempel når "Flex”Verdien brukes med displayegenskap for å gjøre boksen eller beholderen fleksibel. Dessuten kan du også bruke skjermegenskapen sammen med "Align-elementer”For å plassere div i sentrum horisontalt.

Eksempel

Innenfor HTML -filen vår har vi lagt til en tag med litt tekst:

La oss sentrere denne diven

Bruk “vise”Eiendom med“Flex”Verdi for å gjøre div fleksibel. Til slutt vil vi sentrere diven ved å bruke "Align-elementer”Eiendom og setter verdien som“senter”:

Produksjon

Vi har samlet de enkleste metodene for å sentrere en div horisontalt i CSS.

Konklusjon

Å sentrere en div horisontalt, “vise”,“posisjon”, Og“margin”CSS -egenskaper kan brukes. Displayegenskapen må kombineres med "Align-elementer”Eiendom, og posisjonseiendommen skal brukes med“venstre”Eiendom for å sentrere divet horisontalt. I kontrast er marginegenskapen tilstrekkelig til å plassere div i sentrum horisontalt. Denne oppskrivningen diskuterte forskjellige metoder for senter som justerer en div horisontalt.