- Kako centrirati sliku u Div vodoravno?
- Margin Property
- Flexbox modul
- Raspored mrežnog prikaza
- Atribut pozicije
Kako centrirati sliku u Div vodoravno?
Programer može upotrijebiti svojstvo margine, modul Flexbox, raspored rešetkastog prikaza i atribut položaja za vodoravno centriranje slike u divu. Slijedite donji vodič za vodoravno centriranje slike u oznaci div.
Pretpostavimo da postoji div u kojem je slika smještena na ovaj način u HTML datoteci:
< div razreda = 'korijen' >
< img src = '../book.jpg' visina = 'pedeset%' širina = 'pedeset%' razreda = 'slika' >
< / div >
Slika dobiva širinu i visinu od 50% i klasu 'slike'.
Korištenje svojstva margine
Korisnici mogu dodati prostor oko HTML elemenata pomoću svojstva margine. Dodjeljuje marginu prema raspoloživom prostoru nakon promjene veličine zaslona prozora. Na primjer, postavlja lijevu i desnu marginu na auto, a svojstvo prikaza je postavljeno na blokiranje:
img {
prikaz: blok;
margin-lijevo: auto;
margin-desno: automatski;
}
Nakon izvođenja gornjeg primjera, web stranica izgleda ovako:
Gornji rezultat je pokazao da je slika sada u sredini.
Korištenje Flexbox modula
' flexbox ” je modul koji sadrži kompletan skup svojstava. U našem slučaju odaberite klasu korijenskog elementa i upotrijebite flex kao vrijednost svojstva prikaza. Postavi središte kao vrijednost za ' opravdati-sadržaj ' i ' align-items ' Svojstva:
.korijen {zaslon: savitljiv;
opravdati- sadržaj : centar;
align-items: center;
pozadina- boja : plava;
}
Web stranica izgleda ovako, nakon izvršavanja koda:
Gornji izlaz pokazuje da je slika prikazana u središtu diva s bojom pozadine postavljenom na 'plavu'.
Korištenje modula prikaza rešetke
Raspored rešetkastog prikaza ima 12 stupaca, a ukupna širina postavljena je na 100% i postavlja svaki element na određeno mjesto na web stranici:
.korijen {prikaz: rešetka;
mjesto-stavki: centar;
}
U gornjem isječku koda, vrijednost 'grid' dodijeljena je svojstvu prikaza. Dok se 'place-item' koristi kao skraćenica za svojstva 'justify-content' i 'align-items':
Izlaz potvrđuje da je slika u središtu diva pomoću metode rešetke:
Korištenje atributa položaja
Postavljanjem položaja korijenske klase na relativnu vrijednost i klase slike na apsolutnu vrijednost. Slika se može prikazati u središtu diva:
.korijen {položaj: relativan;
}
.slika {
širina : 700 px;
visina : 500 px;
pozicija: apsolutna;
lijevo: pedeset %;
transformirati: translateX ( - pedeset % ) ;
}
Slika se pomiče ulijevo od '50%', a zatim se transformira natrag u '-50%' na X-osi. Vodoravno prikazuje sliku u sredini diva:
Tako se slika može horizontalno centrirati u divu.
Zaključak
Za vodoravno postavljanje slike u div elementu upotrijebite ' margina ”, “ flex modul ”, “ raspored mreže ' i ' položaj ' Svojstva. ' margina ” svojstvo lijevog i desnog postavljeno je na auto. “Flex module” i “grid Layout” postavljaju zaslon na flex odnosno rešetku i koriste ' mjesto stavke “ svojstvo za centriranje slike. Svojstvo položaja postavlja relativnu vrijednost u odnosu na korijensku klasu i apsolutnu u odnosu na klasu slike i koristi svojstva 'lijevo' i 'transformacija'. Ovaj je blog uspješno pokazao kako vodoravno centrirati slike u divu.