Kaip centruoti vaizdą naudojant HTML ir CSS

Šioje pamokoje mes pamatysime, kaip centruoti vaizdus naudojant HTML ir CSS. Tai visai nesudėtinga ir mums to dažnai prireiks mūsų tinklalapiams. Mes pamatysime kai kurias parinktis: vieną, kurioje naudojame tik HTML, kitą - naudojant CSS ir galiausiai - „Bootstrap“.

HTML ir CSS yra dvi pagrindinės žiniatinklio scenarijų kalbos svetainių ir programų kūrimo pasaulyje. Abi kalbos atlieka šią užduotį kartu. Nors HTML suteikia tinklalapių struktūrą, CSS rūpinasi stiliumi ir vaizdine ar garsine dalimi. HTML suteikia žymas, apimančias skirtingus puslapio elementus, ir tokiu būdu kartu su atributais sukursime savo svetainės skeletą.

Skirtumai tarp HTML ir CSSApibendrinant galime pamatyti skirtumus tarp HTML ir CSS taip:

• HTML lengviau išmokti ir įdiegti

• HTML galima keliomis kalbomis

• HTML yra lengvas ir efektyvus

• HTML saugumas yra ribotas

• HTML yra šiek tiek lėtas.

• CSS turi didesnę atributų ir stilių biblioteką nei CSS

• CSS pagerina puslapio įkėlimo laiką.

• CSS puikiai suderinamas ir lengvai prižiūrimas.

• CSS kelia tam tikrų našumo problemų

• CSS neturi įmontuoto saugumo

Šiandien rekomenduojama atlikti veiksmus tiesiogiai naudojant CSS, tačiau jei naudojate daugiau HTML, taip pat galite turėti šias parinktis.

1. Kaip centruoti vaizdą tinklalapyje naudojant tik HTML

Nors atlikdami šias parinktis, norėdami centruoti vaizdą naudodami HTML, pamatysime du būdus, kaip tai padaryti lengvai.

Centrinis vaizdas su HTML ir centro žymaPasirinkus šią paprastą parinktį, pakanka apvynioti vaizdą centrinėmis etiketėmis

• „Src“ dalis naudojama vaizdo kelio adresui nurodyti.

• Alt dalyje pateikiama informacija tinklalapiui apie vaizdo pavadinimą.

Be to, turime priskirti vaizdo aukštį ir plotį taip:

  aukštis = "250" 

Centrinis vaizdas su HTML ir viduryjeTačiau kalbant apie vaizdus, ​​ši centro koncepcija, kurią matėme, skiriasi ir geriau naudoti vidurinį išlyginimą, todėl kodas išlieka toks:

  lygiuoti = ”vidurys”> 

Jei taip pat pridėtume tekstą, turėtume šį kodą:

Šis pavyzdys bus centre vaizdą su tekstu HTML.  align = ”middle”> Dabar baigiame teksto pavyzdį.

Sureguliuokite vaizdą prie HTML su lygiavimo atributuJei norime sulygiuoti vaizdą horizontaliai, tai galime padaryti panašiai, kaip ir tekstą, tai yra, naudoti etikečių etiketėse etiketę

arba. Mes sukursime kodą, kuriame rodomas atributas su vaizdo žyma. Etiketė yra viena iš tų, kuri priima lygiavimo atributą, tačiau naudojimas skiriasi.

Bet kaip mes sakome, etiketė Čia įdėsime tekstą, kuris užpildytų visą dešinę dalį ir apvyniotų mūsų patalpintą vaizdą. Mes ir toliau pildome tekstą solvetic solvetic solvetic

Mes padarysime tą patį, kad sulygiuotume tekstą ir vaizdą į dešinę kairėje, bet pakeisime „kairę“ į „dešinę“.

Čia įdėsime tekstą, kuris užpildytų visą dešinę dalį ir apvyniotų mūsų patalpintą vaizdą. Mes ir toliau pildome tekstą solvetic solvetic solvetic

Nerekomenduojama, nes paskirties vietos ir stiliaus aspektai turėtų būti palikti CSS, o ne tiesiogiai naudojami HTML. Tokiu būdu turėsime kodą, kurį lengviau prižiūrėti ir pakeisti, tačiau jei tam tikru momentu jums to reikia nedideliam ir greitam bandymui, tai verta žinoti.

2. Kaip centruoti vaizdą tinklalapyje naudojant CSS

Čia turėsime HTML kodą ir CSS kodą. Mes pradedame žiūrėdami į HTML.

Mes įvedėme įvaizdžio klasę, vadinamą centru, ir tai padės mums vėliau sukurti stilių CSS. Žemiau yra kodas, skirtas centruoti vaizdą.

 .center {paraštė: 10px auto; ekranas: blokas; } 

Taip pat galime naudoti šį kodą, norėdami sulyginti vaizdą naudodami mūsų tinklalapio CSS:

 .center {margin-left: auto; paraštė-dešinė: auto; }

Jei tai jums neveikia naršyklėje, nes naudojamas teksto centravimo metodas, turime nurodyti naršyklei, kad vaizdas yra bloko lygio elementas. Tokiu būdu mes galime jį centruoti taip, tarsi tai būtų kitas blokas. Mes naudosime šį kodą:

Elementą rodome kaip bloką ir suteikiame jam automatinę paraštę (pakanka, kad paraštė būtų automatinė šonuose, viršuje ir apačioje, galite dėti ką tik norite). Atminkite, kad jei vaizdas užima visą plotį, jis nebus centre.

 img.center {ekranas: blokas; paraštė kairėn: automatinė; paraštė-dešinė: auto; }

3. Kaip centruoti vaizdą tinklalapyje naudojant „Bootstrap“

Naudojant šią populiarią sistemą viskas yra paprasčiau, mes tiesiog turime įterpti centro bloko klasę.

Turėsite atsisiųsti „Bootstrap“ ir susieti jį arba įdėti savo CDN į mūsų HTML, todėl palieku jūsų nuorodą žemiau:

Šių kodų taikymo rezultatą matome žemiau esančiame paveikslėlyje:

Tokiu būdu galime sutelkti vaizdus į HTML ir naudodami CSS ir taip padaryti estetiškai sėkmingesnius žiniatinklio darbus.