- Kuidas pilti tsentreerida Divis horisontaalselt?
- Marginaalne omadus
- Flexboxi moodul
- Ruudustikvaate paigutus
- Positsiooni atribuut
Kuidas pilti tsentreerida Divis horisontaalselt?
Arendaja saab kasutada veerise atribuuti, Flexboxi moodulit, ruudustikuvaate paigutust ja atribuuti Position, et tsentreerida kujutist jaotises horisontaalselt. Järgige allolevat juhendit, et joondada pilt div-sildis horisontaalselt keskele.
Oletame, et HTML-failis on div, milles pilt paigutatakse järgmiselt:
< div klass = 'juur' >
< img src = '../book.jpg' kõrgus = 'viiskümmend%' laius = 'viiskümmend%' klass = 'pilt' >
< / div >
Pildi laius ja kõrgus on 50% ning see on 'pildi' klass.
Margin Property kasutamine
Kasutajad saavad marginaali atribuudi abil HTML-elementide ümber ruumi lisada. See määrab veerise vastavalt vabale ruumile pärast aknaekraani suuruse muutmist. Näiteks määrab veerise vasak ja parem olekuks automaatne ning kuva atribuut blokeerib:
img {
kuva: plokk;
margin-vasak: auto;
margin-parem: auto;
}
Pärast ülaltoodud näite täitmist näeb veebileht välja järgmine:
Ülaltoodud väljund on näidanud, et pilt on nüüd keskel.
Flexboxi mooduli kasutamine
' flexbox ” on moodul, mis sisaldab täielikku atribuutide komplekti. Meie puhul valige juurelemendi klass ja kasutage kuva omaduse väärtusena flexi. Määra keskpunkt väärtuseks õigustama-sisu ” ja „ joondada-üksused ” omadused:
.juur {ekraan: flex;
õigustama- sisu : Keskus;
joonda-elemendid: keskel;
taust- värvi : sinine;
}
Veebileht näeb pärast koodi käivitamist välja selline:
Ülaltoodud väljund näitab, et pilt kuvatakse lahtri keskel ja taustavärviks on seatud 'sinine'.
Ruudustikuvaate paigutusmooduli kasutamine
Ruudustikvaate paigutusel on 12 veergu ja kogulaius on seatud 100% ja see asetab iga elemendi veebilehel kindlasse kohta:
.juur {ekraan: ruudustik;
koha-esemed: keskpunkt;
}
Ülaltoodud koodilõigul on kuva atribuudile määratud „ruudustiku” väärtus. Kuigi „kohaüksust” kasutatakse atribuutide „sisu õigustamine” ja „joondamine” lühendina:
Väljund autentib ruudustiku meetodil, et pilt on divisjoni keskel:
Positsiooniatribuudi kasutamine
Seades juurklassi positsiooni suhteliseks väärtuseks ja pildiklassiks absoluutväärtuseks. Pilti saab kuvada lahtri keskel:
.juur {asend: suhteline;
}
.pilt {
laius : 700 pikslit;
kõrgus : 500 pikslit;
positsioon: absoluutne;
vasakule: viiskümmend %;
teisendus: translateX ( - viiskümmend % ) ;
}
Pilt nihutatakse „50%“-st vasakule ja teisendatakse seejärel X-teljel tagasi „-50%“-ks. See kuvab kujutise jaotuse keskel horisontaalselt:
Nii saab pildi horisontaalselt divisjonis tsentreerida.
Järeldus
Pildi horisontaalseks seadmiseks elemendis div kasutage nuppu ' marginaal ”, „ painduv moodul ”, „ ruudustiku paigutus ” ja „ positsiooni ” omadused. ' marginaal ” vasaku ja parema atribuut on seatud olekusse automaatne. „Paindmoodul” ja „võrgu paigutus” määravad ekraani vastavalt paindumisele ja ruudustikule ning kasutavad „ koht ese “ omadus pildi tsentreerimiseks. Positsiooni atribuut määrab väärtuse juurklassi suhtes ja absoluutväärtuse pildiklassi suhtes ning kasutab atribuute “left” ja “transform”. See ajaveeb on edukalt demonstreerinud, kuidas tsentreerida pilte kahes horisontaalselt.