do të dëshironit të dini se si përqendroni një imazh në një DIV? Vendosja në qendër e një imazhi në një DIV mund të jetë e dobishme për të përmirësuar pamjen dhe organizimin e faqes tuaj të internetit dhe për të theksuar imazhin që dëshironi të shfaqni. Përqendroni një imazh në një DIV nuk eshte e veshtire, por varet nga disa faktorë, si lloji i imazhit, madhësia e DIV, stili i DIV, etj.
Në këtë artikull ne do të shpjegojmë si të përqendroni një imazh në një DIV duke përdorur HTML dhe CSS, të cilat janë gjuhët e programimit që përdoren për të krijuar dhe dizajnuar faqe në internet. Ne do t'ju tregojmë disa metoda dhe shembuj në mënyrë që të zgjidhni atë që ju përshtatet më së miri.
Çfarë është një DIV
Një div është një element HTML që përdoret për të krijoni seksione ose kontejnerë në një faqe interneti. Kjo mund të përmbajë elementë të tjerë, si tekst, imazhe, lidhje, etj. Gjithashtu ky është një element blloku, që do të thotë se zë gjithë gjerësinë e faqes dhe atë ju mund të përcaktoni lartësinë dhe gjerësinë e tij. Një div është një element i përgjithshëm, që do të thotë se nuk ka kuptim specifik semantik. Për këtë arsye, zakonisht përdoret me atributet e klasës ose id, për t'i dhënë div një emër ose një kategori. Gjithashtu përdoret shpesh me atribut stil ose me fletë stilesh CSS, për t'i dhënë një pamje ose dizajn div.
Një div përdoret për të organizuar dhe strukturuar përmbajtjen e një faqe interneti dhe për të aplikuar vetitë e stilimit në të. Me një div mund të krijoni një kuti që përmban elementë të tjerë, dhe që mund të jetë i rreshtuar, i përqendruar, i ngjyrosur, i hijezuar, etj. Formati mund të përdoret gjithashtu për të krijoni kolona ose rreshta, për të shpërndarë përmbajtjen në mënyrë të rregullt dhe fleksibël. Në përgjithësi mund të përdoret gjithashtu për të krijuar efekte vizuale ose interaktive, si animacione, tranzicione, transformime, etj.
Si të përqendroni një imazh horizontalisht
Përqendroni një imazh horizontalisht në një DIV do të thotë përafrimi i imazhit në qendër gjerësia e DIV. Ka disa mënyra për ta bërë këtë, por më të zakonshmet janë këto:
- Duke përdorur veçorinë text-align: qendër. Kjo veti zbatohet në elementin DIV dhe bën që të gjithë elementët brenda DIV të përqendrohen horizontalisht në qendër. Për shembull:
- Përdorimi i vetive të marzhit: auto. Kjo veti zbatohet në elementin IMG dhe bën që imazhi të ketë të njëjtat kufij majtas dhe djathtas, gjë që e përqendron atë horizontalisht. Që të funksionojë, imazhi duhet të ketë një gjerësi të përcaktuar dhe të jetë i tipit bllok ose të ketë shfaqjen e vetive: bllok. Për shembull:
- Duke përdorur vetinë e transformimit: translateX(). Kjo veti zbatohet në elementin IMG dhe bën që imazhi të lëvizë horizontalisht në një distancë të caktuar nga pozicioni i tij origjinal. Për ta vendosur në qendër horizontalisht, duhet ta zhvendosni 50% të gjerësisë së tij në të djathtë. Që kjo të funksionojë, imazhi duhet të ketë një gjerësi të përcaktuar dhe të jetë i tipit bllok ose të ketë shfaqjen e vetive: bllok. Për shembull:
Si të përqendroni një imazh vertikalisht
Përqendroni një imazh vertikalisht në një DIV do të thotë rreshtimi i imazhit në qendër të lartësisë së DIV. Ka disa mënyra për ta bërë këtë, por më të zakonshmet janë këto:
- Përdorimi i vetive vertikale të rreshtimit: mes. Kjo veti zbatohet në elementin IMG dhe bën që imazhi të jetë i rreshtuar në qendër vertikalisht në lidhje me vijën bazë të tekstit. Që kjo të funksionojë, elementi DIV duhet të ketë një lartësi të përcaktuar dhe elementi IMG duhet të jetë i tipit inline ose të ketë veçorinë display: inline. Për shembull:
- Përdorimi i vetive margin-top dhe margin-bottom. Këto veti aplikohen në elementin IMG dhe bëjnë që imazhi të ketë të njëjtat kufij të sipërm dhe të poshtëm, duke e përqendruar atë vertikalisht. Për të punuar, elementi DIV duhet të ketë një lartësi të përcaktuar dhe elementi IMG duhet të ketë një lartësi të përcaktuar dhe të jetë i tipit bllok ose të ketë veçorinë display: block. Për shembull:
- Duke përdorur vetinë e transformimit: translateY(). Këtë herë ai aplikohet në elementin IMG dhe bën që imazhi të lëvizë vertikalisht në një distancë të caktuar nga pozicioni i tij origjinal. Për ta përqendruar vertikalisht, duhet ta lëvizni 50% të lartësisë së tij poshtë. Për të punuar, elementi DIV duhet të ketë një lartësi të përcaktuar dhe elementi IMG duhet të ketë një lartësi të përcaktuar dhe të jetë i tipit bllok ose të ketë veçorinë display: block. Për shembull:
Si të përqendroni një imazh në të dy akset
Përqendrimi i një imazhi në të dy akset në një DIV do të thotë rreshtoni imazhin në qendër të gjerësisë dhe lartësisë e DIV, kjo është më komplekse. Ka disa mënyra për ta bërë këtë, por më të zakonshmet janë këto:
- Duke përdorur veçorinë text-align: në qendër dhe tiparin vertikal-align: mes. Këto veti zbatohen respektivisht për elementin DIV dhe elementin IMG dhe bëjnë që imazhi të përafrohet në qendër si horizontalisht ashtu edhe vertikalisht. Që kjo të funksionojë, elementi DIV duhet të ketë një lartësi të përcaktuar dhe elementi IMG duhet të jetë i tipit inline ose të ketë veçorinë display: inline. Për shembull:
- Përdorimi i vetive të marzhit: auto. Këtu ai aplikohet në elementin IMG dhe bën që imazhi të ketë kufij të barabartë në të katër anët, duke e përqendruar atë në të dy akset. Për të punuar, elementi DIV duhet të ketë një lartësi të përcaktuar dhe elementi IMG duhet të ketë një gjerësi dhe lartësi të përcaktuar dhe të jetë i tipit bllok ose të ketë veçorinë display: block. Për shembull:
- Përdorimi i vetive transformuese: translate(). Në këtë rast ai aplikohet në elementin IMG dhe bën që imazhi të lëvizë një distancë të caktuar nga pozicioni i tij origjinal në të dy akset. Për ta vendosur në qendër, duhet ta zhvendosni 50% të gjerësisë së tij në të djathtë dhe 50% të lartësisë së tij poshtë. Që kjo të funksionojë, elementi DIV duhet të ketë një lartësi të përcaktuar dhe elementi IMG duhet të ketë një gjerësi dhe lartësi të përcaktuar dhe të jetë i tipit block ose të ketë veçorinë display: block. Për shembull:
Në qendër çdo imazh
Përqendrimi i një imazhi në një DIV mund të jetë i dobishëm për të përmirësuar pamjen dhe organizimin e faqes suaj të internetit, dhe për të theksuar imazhin që dëshironi të shfaqni. Përqendrimi i një imazhi në një DIV nuk është i vështirë, por varet nga disa faktorë, si lloji i imazhit, madhësia e DIV, stili i DIV, etj.
Në këtë artikull ne kemi shpjeguar se si të vendosim në qendër një imazh në një DIV duke përdorur HTML dhe CSS, të cilat janë gjuhët e programimit që përdoren për të krijuar dhe dizajnuar faqe në internet. Ne ju kemi treguar disa metoda dhe shembuj që të mund të zgjidhni ai që ju përshtatet më shumë.
Shpresojmë që ju ka pëlqyer ky artikull dhe se keni mësuar se si të përqendroni një imazh në një DIV. Nëse keni ndonjë pyetje ose sugjerim, na lini një koment. Ju gjithashtu mund ta ndani këtë artikull me miqtë ose familjen tuaj që gjithashtu e pëlqejnë atë HTML ose CSS. Le të shkojmë në punë dhe të planifikojmë!