ar norėtumėte sužinoti kaip Centruoti vaizdą DIV? Vaizdo centravimas DIV gali būti naudingas norint pagerinti savo tinklalapio išvaizdą ir organizavimą bei paryškinti norimą rodyti vaizdą. Centruokite vaizdą DIV nėra sunku, bet tai priklauso nuo kelių veiksnių, pvz., vaizdo tipo, DIV dydžio, DIV stiliaus ir kt.
Šiame straipsnyje mes paaiškinsime kaip centruoti vaizdą DIV naudojant HTML ir CSS, kurios yra programavimo kalbos, naudojamos kuriant ir projektuojant tinklalapius. Mes jums parodysime kelis metodus ir pavyzdžius, kad galėtumėte pasirinkti jums tinkamiausią.
Kas yra DIV
Div yra HTML elementas, naudojamas tinklalapyje sukurti skyrius arba konteinerius. Jame gali būti kitų elementų, tokių kaip tekstas, vaizdai, nuorodos ir kt. Be to, tai yra blokinis elementas, o tai reiškia, kad jis užima visą puslapio plotį ir tiek galite nustatyti jo aukštį ir plotį. Div yra bendras elementas, tai reiškia, kad jis neturi konkrečios semantinės reikšmės. Dėl šios priežasties jis paprastai naudojamas su klasės arba ID atributais, norint suteikti pavadinimą arba kategoriją div. Jis taip pat dažnai naudojamas su stiliaus atributas arba su CSS stiliaus lapais, suteikti išvaizdą ar išdėstymą div.
Div naudojamas tinklalapio turiniui tvarkyti ir struktūrizuoti bei jam pritaikyti stiliaus ypatybes. Naudodami div galite sukurti langelį, kuriame yra kitų elementų ir kurį galima išlygiuoti, centruoti, nuspalvinti, nuspalvinti ir pan. Formatas taip pat gali būti naudojamas sukurti stulpelius ar eilutes, skleisti turinį tvarkingai ir lanksčiai. Paprastai jis taip pat gali būti naudojamas kuriant vaizdinius ar interaktyvius efektus, tokius kaip animacija, perėjimai, transformacijos ir kt.
Kaip centruoti vaizdą horizontaliai
Centruokite vaizdą horizontaliai DIV reiškia išlygiuoti vaizdą centre DIV pločio. Yra keletas būdų, kaip tai padaryti, tačiau dažniausiai naudojami šie:
- Naudokite ypatybę text-align: centre. Ši savybė taikoma DIV elementui, todėl visi DIV elementai sulygiuojami centre horizontaliai. Pavyzdžiui:
- Naudokite paraštę: auto property. Ši savybė taikoma IMG elementui, todėl vaizdas kairėje ir dešinėje turi tas pačias paraštes, o tai centruoja jį horizontaliai. Kad tai veiktų, vaizdas turi būti nustatyto pločio ir bloko tipo arba turėti ypatybę Display: block. Pavyzdžiui:
- Naudokite transformavimo ypatybę: translateX(). Ši savybė taikoma IMG elementui, todėl vaizdas horizontaliai pasislenka tam tikru atstumu nuo pradinės padėties. Norėdami centruoti horizontaliai, turite perkelti jį 50% pločio į dešinę. Kad tai veiktų, vaizdas turi būti nustatyto pločio ir bloko tipo arba turėti ypatybę Display: block. Pavyzdžiui:
Kaip centruoti vaizdą vertikaliai
Centruokite vaizdą vertikaliai DIV reiškia išlygiuoti vaizdą DIV aukščio centre. Yra keletas būdų, kaip tai padaryti, tačiau dažniausiai naudojami šie:
- Naudokite vertikalaus lygiavimo: vidurio savybę. Ši savybė taikoma IMG elementui ir dėl to vaizdas yra vertikaliai išlygiuotas centre, atsižvelgiant į pagrindinę teksto liniją. Kad tai veiktų, DIV elemento aukštis turi būti apibrėžtas, o IMG elementas turi būti inline tipo arba turėti Display: inline ypatybę. Pavyzdžiui:
- Naudokite ypatybes paraštės viršuje ir paraštės apačioje. Šios savybės pritaikomos IMG elementui, todėl vaizdo paraštės viršuje ir apačioje yra vienodos, o tai centruoja vertikaliai. Kad veiktų, DIV elementas turi turėti apibrėžtą aukštį, o IMG elementas turi būti apibrėžto aukščio ir būti bloko tipo arba turėti Display: block ypatybę. Pavyzdžiui:
- Naudokite transformavimo ypatybę: translateY(). Šį kartą jis taikomas IMG elementui ir sukelia vaizdą vertikaliai tam tikru atstumu nuo pradinės padėties. Norėdami centruoti vertikaliai, turite jį perkelti 50% jo aukščio žemyn. Kad veiktų, DIV elementas turi turėti apibrėžtą aukštį, o IMG elementas turi būti apibrėžto aukščio ir būti bloko tipo arba turėti Display: block ypatybę. Pavyzdžiui:
Kaip centruoti vaizdą ant abiejų ašių
Vaizdo centravimas abiejose ašyse DIV reiškia sulygiuokite vaizdą tiek pločio, tiek aukščio centre DIV, tai yra sudėtingiausia. Yra keletas būdų, kaip tai padaryti, tačiau dažniausiai naudojami šie:
- Naudokite ypatybes text-align: centre ir vertikalus lygiavimas: vidurys. Šios savybės taikomos atitinkamai DIV ir IMG elementui, todėl vaizdas išlygiuojamas centre tiek horizontaliai, tiek vertikaliai. Kad tai veiktų, DIV elemento aukštis turi būti nustatytas, o IMG elementas turi būti inline tipo arba turėti Display: inline ypatybę. Pavyzdžiui:
- Naudokite paraštę: auto property. Čia jis taikomas IMG elementui ir sukuria vienodas vaizdo paraštes visose keturiose pusėse, centruojant jį abiejose ašyse. Kad veiktų, elementas DIV turi turėti apibrėžtą aukštį, o IMG elementas turi turėti apibrėžtą plotį ir aukštį ir būti bloko tipo arba turėti Display: block ypatybę. Pavyzdžiui:
- Naudokite transformaciją: translate() nuosavybę. Šiuo atveju jis taikomas IMG elementui ir priverčia vaizdą pasislinkti tam tikru atstumu nuo pradinės padėties abiem ašimis. Norėdami jį centruoti, turite perkelti 50% pločio į dešinę ir 50% aukščio žemyn. Kad veiktų, elementas DIV turi turėti apibrėžtą aukštį, o IMG elementas turi turėti apibrėžtą plotį ir aukštį ir būti bloko tipo arba turėti Display: block ypatybę. Pavyzdžiui:
Centruokite bet kurį vaizdą
Vaizdo centravimas DIV gali būti naudingas pagerinti savo svetainės išvaizdą ir organizavimąir norėdami paryškinti norimą rodyti vaizdą. Vaizdo centravimas DIV nėra sudėtingas, tačiau tai priklauso nuo kelių veiksnių, tokių kaip vaizdo tipas, DIV dydis, DIV stilius ir kt.
Šiame straipsnyje Mes paaiškinome, kaip centruoti vaizdą DIV naudojant HTML ir CSS, kurios yra programavimo kalbos, naudojamos kuriant ir projektuojant tinklalapius. Mes jums parodėme įvairius metodus ir pavyzdžius, iš kurių galite pasirinkti. tas, kuris jums labiausiai tinka.
Tikimės, kad jums patiko šis straipsnis ir sužinojote, kaip centruoti vaizdą DIV. Jei turite klausimų ar pasiūlymų, palikite mums komentarą. Taip pat galite pasidalinti šiuo straipsniu su draugais ar šeimos nariais, kuriems taip pat patinka HTML arba CSS. Pradėkime dirbti ir programuoti!