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:
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 divenBruk “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.