želite li znati kako centrirajte sliku u DIV? Centriranje slike u DIV-u može biti korisno za poboljšanje izgleda i organizacije vaše web-stranice te za isticanje slike koju želite prikazati. Centrirajte sliku u DIV nije teško, ali ovisi o nekoliko čimbenika, kao što su vrsta slike, veličina DIV-a, stil DIV-a itd.
U ovom ćemo članku objasniti kako centrirati sliku u DIV koristeći HTML i CSS, koji su programski jezici koji se koriste za izradu i dizajn web stranica. Pokazat ćemo vam nekoliko metoda i primjera kako biste mogli odabrati onu koja vam najviše odgovara.
Što je DIV
Div je HTML element koji se koristi za stvaranje odjeljaka ili spremnika na web stranici. Ovo može sadržavati druge elemente, kao što su tekst, slike, poveznice itd. Također, ovo je blok element, što znači da zauzima cijelu širinu stranice i to možete definirati njegovu visinu i širinu. Div je generički element, što znači da nema specifično semantičko značenje. Iz tog razloga, obično se koristi s atributima class ili id, kako bi se divu dalo ime ili kategorija. Također se često koristi sa atribut stila ili s CSS listovima stilova, dati izgled ili dizajn div.
Div se koristi za organiziranje i strukturiranje sadržaja web stranice i za primjenu svojstava stila na njega. Pomoću diva možete stvoriti okvir koji sadrži druge elemente i koji se može poravnati, centrirati, obojiti, osjenčati itd. Format se također može koristiti za stvoriti stupce ili retke, distribuirati sadržaj na uredan i fleksibilan način. Općenito se također može koristiti za stvaranje vizualnih ili interaktivnih efekata, kao što su animacije, prijelazi, transformacije itd.
Kako vodoravno centrirati sliku
Centrirajte sliku vodoravno u DIV znači poravnati sliku u sredini širina DIV. Postoji nekoliko načina za to, ali najčešći su sljedeći:
- Koristite svojstvo text-align: center. Ovo se svojstvo primjenjuje na DIV element i uzrokuje horizontalno centriranje svih elemenata unutar DIV-a. Na primjer:
- Korištenje svojstva margine: auto. Ovo se svojstvo primjenjuje na IMG element i uzrokuje da slika ima iste margine s lijeve i desne strane, što je horizontalno centrira. Da bi radila, slika mora imati definiranu širinu i biti tipa block ili imati svojstvo display: block. Na primjer:
- Korištenje svojstva transformacije: translateX(). Ovo se svojstvo primjenjuje na IMG element i uzrokuje vodoravno pomicanje slike na određenu udaljenost od izvornog položaja. Da biste ga centrirali vodoravno, morate ga pomaknuti 50% njegove širine udesno. Da bi ovo radilo, slika mora imati definiranu širinu i biti tipa block ili imati svojstvo display: block. Na primjer:
Kako okomito centrirati sliku
Centrirajte sliku okomito u DIV znači poravnati sliku u sredini visine DIV-a. Postoji nekoliko načina za to, ali najčešći su sljedeći:
- Korištenje svojstva vertikalnog poravnanja: sredina. Ovo se svojstvo primjenjuje na IMG element i uzrokuje okomito središte slike u odnosu na osnovnu liniju teksta. Da bi radio, DIV element mora imati definiranu visinu, a IMG element mora biti tipa inline ili imati svojstvo display: inline. Na primjer:
- Korištenje svojstva margin-top i margin-bottom. Ta se svojstva primjenjuju na IMG element i uzrokuju da slika ima iste gornje i donje margine, centrirajući okomito. Da bi radio, DIV element mora imati definiranu visinu, a IMG element mora imati definiranu visinu i biti tipa block ili imati svojstvo display: block. Na primjer:
- Korištenje svojstva transformacije: translateY(). Ovaj put se primjenjuje na IMG element i uzrokuje okomito pomicanje slike na određenu udaljenost od izvornog položaja. Da biste ga centrirali okomito, morate ga pomaknuti 50% njegove visine prema dolje. Da bi radio, DIV element mora imati definiranu visinu, a IMG element mora imati definiranu visinu i biti tipa block ili imati svojstvo display: block. Na primjer:
Kako centrirati sliku na obje osi
Centriranje slike na obje osi u DIV znači poravnajte sliku u sredini širine i visine DIV-a, ovo je najsloženije. Postoji nekoliko načina za to, ali najčešći su sljedeći:
- Korištenje svojstva text-align: center i svojstva vertical-align: middle. Ova se svojstva odnose na DIV element i IMG element, te uzrokuju centriranje slike vodoravno i okomito. Da bi radio, DIV element mora imati definiranu visinu, a IMG element mora biti tipa inline ili imati svojstvo display: inline. Na primjer:
- Korištenje svojstva margine: auto. Ovdje se primjenjuje na IMG element i čini da slika ima iste margine na sve četiri strane, što je centrira na obje osi. Da bi ovo funkcioniralo, DIV element mora imati definiranu visinu, a IMG element mora imati definiranu širinu i visinu i biti tipa block ili imati svojstvo display: block. Na primjer:
- Korištenje svojstva transformacije: translate(). U ovom slučaju primjenjuje se na IMG element i uzrokuje pomicanje slike na određenu udaljenost od svog izvornog položaja u obje osi. Da biste ga centrirali, morate ga pomaknuti 50% širine udesno i 50% visine prema dolje. Da bi radio, DIV element mora imati definiranu visinu, a IMG element mora imati definiranu širinu i visinu i biti tipa block ili imati svojstvo display: block. Na primjer:
Centrirajte bilo koju sliku
Centriranje slike u DIV-u može biti korisno poboljšati izgled i organizaciju vaše web stranicei označite sliku koju želite prikazati. Centriranje slike u DIV-u nije teško, ali ovisi o nekoliko čimbenika kao što su vrsta slike, veličina DIV-a, stil DIV-a itd.
U ovom članku objasnili smo kako centrirati sliku u DIV pomoću HTML-a i CSS-a, koji su programski jezici koji se koriste za izradu i dizajn web stranica. Pokazali smo vam različite metode i primjere među kojima možete izabrati. ona koja vam najviše odgovara.
Nadamo se da vam se svidio ovaj članak i da ste naučili kako centrirati sliku u DIV. Ako imate pitanja ili prijedloga, ostavite nam komentar. Također možete podijeliti ovaj članak sa svojim prijateljima ili obitelji kojima se također sviđa HTML ili CSS. Idemo na posao i raspored!