- Kako centrirati sliko v Div vodoravno?
- Margin Property
- Modul Flexbox
- Postavitev mrežnega pogleda
- Atribut položaja
Kako centrirati sliko v Div vodoravno?
Razvijalec lahko uporabi lastnost margine, modul Flexbox, postavitev mrežnega pogleda in atribut Position za vodoravno centriranje slike v divu. Sledite spodnjemu vodniku, da vodoravno poravnate sliko na sredino v oznaki div.
Predpostavimo, da obstaja div, v katerem je slika v datoteki HTML postavljena na ta način:
< div razred = 'root' >
< img src = '../book.jpg' višina = 'petdeset%' premer = 'petdeset%' razred = 'slika' >
< / div >
Slika dobiva širino in višino 50 % ter razred »slika«.
Uporaba lastnosti roba
Uporabniki lahko dodajo prostor okoli elementov HTML z uporabo lastnosti roba. Dodeli rob glede na prostor, ki je na voljo po spreminjanju velikosti zaslona okna. Na primer, levi in desni rob nastavi na samodejno, lastnost prikaza pa je nastavljena na blokiranje:
img {
zaslon: blok;
rob-levo: samodejno;
rob-desno: samodejno;
}
Po izvedbi zgornjega primera je spletna stran videti takole:
Zgornji rezultat je pokazal, da je slika zdaj v sredini.
Uporaba modula Flexbox
' flexbox ” je modul, ki vsebuje celoten niz lastnosti. V našem primeru izberite razred korenskega elementa in uporabite flex kot vrednost lastnosti prikaza. Nastavite sredino kot vrednost za » justify-content « in » align-items ” lastnosti:
.root {zaslon: flex;
utemelji- vsebino : center;
align-items: center;
ozadje- barva : modra;
}
Spletna stran je po izvedbi kode videti takole:
Zgornji rezultat kaže, da je slika prikazana v središču diva z barvo ozadja, nastavljeno na »modro«.
Uporaba modula postavitve mrežnega pogleda
Postavitev mrežnega pogleda ima 12 stolpcev, skupna širina pa je nastavljena na 100 % in vsak element postavi na določeno mesto na spletni strani:
.root {prikaz: mreža;
kraji: center;
}
V zgornjem delčku kode je vrednost »mreža« dodeljena lastnosti prikaza. Medtem ko se »place-item« uporablja kot okrajšava za lastnosti »justify-content« in »align-items«:
Izhod potrdi, da je slika v središču diva z uporabo metode mreže:
Uporaba atributa položaja
Z nastavitvijo položaja korenskega razreda na relativno vrednost in razreda slike na absolutno vrednost. Slika je lahko prikazana na sredini div:
.root {položaj: relativni;
}
.slika {
premer : 700 slikovnih pik;
višina : 500 slikovnih pik;
položaj: absolutno;
levo: petdeset %;
transformacija: translateX ( - petdeset % ) ;
}
Slika se premakne levo od »50%« in se nato preoblikuje nazaj v »-50%« na osi X. Vodoravno prikaže sliko na sredini diva:
Tako je lahko slika na sredini diva vodoravno.
Zaključek
Za vodoravno nastavitev slike v elementu div uporabite » marža ”, “ flex modul ”, “ postavitev mreže « in » položaj ” lastnosti. ' marža ” lastnost leve in desne je nastavljena na samodejno. »Flex module« in »grid Layout« nastavita zaslon na upogljivost oziroma mrežo in uporabite » postavite predmet “ lastnost za centriranje slike. Lastnost položaja nastavi vrednost glede na korenski razred in absolutno za razred slike ter uporablja lastnosti »levo« in »preoblikovanje«. Ta spletni dnevnik je uspešno pokazal, kako vodoravno centrirati slike v div.