Kuigi see ei pruugi olla keeruline, võib piltide tsentreerimine veebilehtedele olla rohkem seotud kui arvate. Peamine põhjus on see, et silt on inline element, nii et see toimib erinevalt ploki tasandi elementidest. Mõned lähenemisviisid kasutavad HTML-i; teised kasutavad CSS-i ja mõnda neist peetakse teistest "õigemaks", sest neid ei ole aegunud. Jätkamiseks valige allolevast loendist meetod ja järgige juhiseid.

HTML5 toetuseks peaksite kasutama stiili atribuuti väärtusega text-align: block block level element; näiteks a sildid.

HTML-koodi näide

Näpunäide. Ülaltoodud joonisega stiili lisamine peaks toimuma ainult üks kord, kui teil on vaja koondada mitu pilti, peaksite kasutama alltoodud ettepanekut ja looma CSS-klassi, et aidata vähendada üleliigset koodi ja kiirendada veebilehte.

Näide eespool mainitud koodi kasutavast pildikeskusest

Konverteerimine blokitaseme elemendiks

Üks võimalus pilte õigesti keskendada on määratleda elemendina. Selleks lisage reegel oma lehe peale (näidatud järgmises näites) või seotud välise CSS-failiga.

HTML-koodi näide

 .centerImage {text-align: center; kuva: plokk; } 

Selle koodiga saate keskuse pildiklassi rakendada sildi, ilma et peaksite seda ploki tasandi elemendis pesa. See meetod töötab mitme pildi puhul.

Keskendunud kujutise kood

Siltide kasutamine

Saate pildi keskele ühendada silt sildid. See tegevus keskendub sellele ja ainult sellele pildile veebilehel. Tuleb märkida, et see meetod on HTML5-s kadunud ja see ei toimi alati kõigis brauserites. Soovitame seda meetodit kasutada ainult siis, kui ükski ülaltoodud soovitustest ei toimi, kui üritate kujutise keskele paigutada.

HTML-koodi näide