Vaikka se ei välttämättä ole vaikeaa, kuvien keskittäminen Web-sivuillesi saattaa olla enemmän mukana kuin luulet. Tärkein syy on se, että tunniste on sisäinen elementti, joten se toimii eri tavalla kuin lohkon tason elementit. Jotkut lähestymistavat käyttävät HTML: ää; toiset käyttävät CSS: ää, ja jotkut pidetään "oikeammin" kuin toiset, koska niitä ei ole poistettu käytöstä. Jatka valitsemalla menetelmä alla olevasta luettelosta ja noudata ohjeita.

Jos haluat tukea HTML5: ssä, sinun tulisi käyttää tyyli-attribuuttia, jonka arvo on teksti-align: keskellä lohkon tason elementin sisällä; niin kuin tunnisteita.

Esimerkki HTML-koodista

Vihje: Yllä esitetyn sisäisen tyylin lisääminen tulisi tehdä vain kerran, jos sinun täytyy keskittää useita kuvia, käytä alla olevaa ehdotusta ja luo CSS-luokka, jotta voit vähentää redundanttia koodia ja nopeuttaa verkkosivua.

Esimerkki edellä mainittua koodia käyttävästä kuvakeskuksesta

Muunna lohkon tason elementiksi

Yksi tapa, jolla voit keskittää kuvat oikein, on määritellä elementti lohkotason elementtinä. Voit tehdä tämän lisäämällä säännön sivun päähän (esitetty seuraavassa esimerkissä) tai linkitetyn ulkoisen CSS-tiedoston kanssa.

Esimerkki HTML-koodista

 .centerImage {text-align: center; display: block; } 

Tämän koodin avulla voit käyttää centerImage- luokkaa merkintä ilman, että se on pakattava lohkotason elementtiin. Tämä menetelmä toimii useissa kuvissa.

Esimerkki keskitetystä kuvakoodista

Tunnisteiden käyttäminen

Voit keskittää kuvan liittämällä sen tunniste tunnisteita. Tämä toiminta keskittyy siihen, ja vain se, kuva verkkosivulla. On huomattava, että tämä menetelmä on vanhentunut HTML5: ssä eikä toimi aina kaikissa selaimissa. Suosittelemme tämän menetelmän käyttöä vain, jos mikään edellä mainituista ehdotuksista ei toimi, jos yrität keskittää kuvan.

Esimerkki HTML-koodista