Kuidas pilti tsentreerida HTML-i programmeerimise abil

...

Kasutage veebilehe välimuse määramiseks CSS-i.

Veebilehe kodeerija kasutab hüperteksti märgistuskeelt, et öelda veebibrauserile lehe iga elemendi (nt lõigu, pealkirja või loendi) funktsionaalset eesmärki. Alates HTML 4-st on Cascading Style Sheets andnud kodeerijale võimaluse öelda brauserile, kuidas need elemendid peaksid välja nägema, eraldi nende määratlemisest. Lehel võib olla erinevat tüüpi seadmete (nt mobiiltelefonide ja lauaarvutite) jaoks erinev CSS-stiil, mis võimaldab lehe välimust muuta, ilma et kodeerija peaks HTML-i muutma. Kasutage pildi tsentreerimiseks CSS-i atribuute.

Samm 1

Asetage HTML-faili märgend "img", kuhu soovite oma pilti veebilehel kuvada. See peab asuma siltide "body" vahel ja siltide "h1" järel. Näiteks,

Päeva video

See on teie tekst.

Pildi kirjeldus

määrab pildi nimega photo.jpg, mis on 170 pikslit lai ja 50 pikslit pikk. See on esimene asi lehel pärast ülemist pealkirja.

2. samm

Kasutage leheelementide (nt piltide) ümber oleva ruumi määratlemiseks CSS-i atribuuti "margin". Veerise atribuudi väärtus "auto" käsib veebibrauseril ruumi suuruse automaatselt määrata. Niisiis,

Pildi kirjeldus määratleb, et pildi ümber oleva ruumi määrab brauser.

3. samm

Kasutage atribuuti "kuva", et määrata, kuidas lehe elementi kuvatakse. Kuvaatribuudi väärtus "block" käsib veebibrauseril kuvada elementi oma real, mille kohal ja all on tühik. Niisiis, Pildi kirjeldus defineerib sama pildi, kuid lisab "display: block;" asetab selle nüüd omale reale.

4. samm

Vaadake veebilehte mitmes erinevas brauseris, et kontrollida, kas pilt on õigesti keskel.

Näpunäide

Lisage pildi kirjeldus "alt" märgendisse. See muudab teie lehe nägemispuudega lugejatele paremini juurdepääsetavaks ja tagab, et teie kood vastab standarditele. Pildi kirjeldus