- Kaip centruoti vaizdą „Div“ horizontaliai?
- Maržos nuosavybė
- „Flexbox“ modulis
- Tinklelio rodinio išdėstymas
- Pozicijos atributas
Kaip centruoti vaizdą „Div“ horizontaliai?
Kūrėjas gali naudoti paraštės ypatybę, „Flexbox“ modulį, tinklelio rodinio išdėstymą ir atributą „Position“, kad centruotų vaizdą skirsnyje horizontaliai. Vykdykite toliau pateiktą vadovą, kad sulygiuotumėte vaizdą horizontaliai „div“ žymoje.
Tarkime, kad HTML faile yra div, kuriame vaizdas įdėtas tokiu būdu:
< div klasė = 'šaknis' >
< img src = '../book.jpg' aukščio = 'penkiasdešimt%' plotis = 'penkiasdešimt%' klasė = 'vaizdas' >
< / div >
Vaizdas tampa 50% pločio ir aukščio bei „vaizdo“ klasės.
Margin Property naudojimas
Vartotojai gali pridėti vietos aplink HTML elementus naudodami paraštės ypatybę. Ji priskiria paraštę pagal laisvą erdvę pakeitus lango ekrano dydį. Pavyzdžiui, paraštės kairėje ir dešinėje nustatomos kaip automatinės, o rodymo ypatybė – blokuoti:
img {
ekranas: blokas;
paraštė-kairė: automatinis;
paraštė-dešinė: automatinis;
}
Atlikus aukščiau pateiktą pavyzdį, tinklalapis atrodo taip:
Aukščiau pateikta produkcija rodo, kad vaizdas dabar yra centre.
„Flexbox“ modulio naudojimas
„ flexbox “ yra modulis, kuriame yra visas ypatybių rinkinys. Mūsų atveju pasirinkite pagrindinio elemento klasę ir naudokite flex kaip rodymo ypatybės reikšmę. Nustatyti centrą kaip reikšmę „ pateisinti-turinys “ ir „ išlyginti elementus “ savybės:
.šaknis {ekranas: lankstus;
pateisinti - turinys : centras;
lygiuoti elementus: centre;
fonas- spalva : mėlyna;
}
Atlikus kodą tinklalapis atrodo taip:
Aukščiau pateikta išvestis rodo, kad vaizdas rodomas div centre, o fono spalva nustatyta į „mėlyną“.
Tinklelio rodinio išdėstymo modulio naudojimas
Tinklelio rodinio išdėstymą sudaro 12 stulpelių, o bendras plotis nustatytas į 100 % ir kiekvienas elementas įdedamas į tam tikrą tinklalapio vietą:
.šaknis {ekranas: tinklelis;
vietos daiktai: centras;
}
Aukščiau pateiktame kodo fragmente „tinklelio“ reikšmė priskirta rodymo ypatybei. Nors „vietos elementas“ naudojamas kaip „pateisinti turinį“ ir „sulygiuoti elementus“ savybių santrumpa:
Išvestis patvirtina, kad vaizdas yra div centre, naudojant tinklelio metodą:
Padėties atributo naudojimas
Nustatydami šakninės klasės padėtį į santykinę vertę, o vaizdo klasės – į absoliučią reikšmę. Vaizdas gali būti rodomas skyrelio centre:
.šaknis {padėtis: santykinė;
}
.vaizdas {
plotis : 700 taškų;
aukščio : 500 taškų;
padėtis: absoliuti;
liko: penkiasdešimt %;
transformuoti: translateX ( - penkiasdešimt % ) ;
}
Vaizdas perkeliamas į kairę nuo „50%“, o tada paverčiamas atgal į „-50%“ X ašyje. Vaizdas rodomas stulpelio centre horizontaliai:
Taip vaizdas gali būti horizontaliai centruojamas skirsnyje.
Išvada
Norėdami horizontaliai nustatyti vaizdą div elemente, naudokite ' marža “, „ lankstus modulis “, „ tinklelio išdėstymas “ ir „ padėtis “ savybes. „ marža Kairės ir dešinės pusės ypatybė nustatyta kaip automatinė. „Lanksčioji modulis“ ir „tinklelio išdėstymas“ nustato ekraną atitinkamai lankstumui ir tinkleliui ir naudoja „ vietos daiktas “ savybė centruoti vaizdą. Padėties ypatybė nustato reikšmę, susijusią su šaknine klase, o absoliučią – su vaizdo klase ir naudoja „left“ ir „transform“ savybes. Šis tinklaraštis sėkmingai parodė, kaip horizontaliai centruoti vaizdus divoje.