Vaikka se ei välttämättä ole vaikeaa, kuvien keskittäminen verkkosivuille voi olla enemmän mukana kuin luulet. Suurin syy on se, että -tunniste on rivielementti, joten se käyttäytyy eri tavalla kuin lohkotason elementit. Jotkut lähestymistavat käyttävät HTML:ää tai CSS:ää, ja toisia pidetään “oikeampina” kuin toisia, koska niitä ei ole vanhentunut. Jos haluat sijoittaa kuvan verkkosivusi keskelle, valitse menetelmä alla olevasta luettelosta ja seuraa ohjeita.
Tyyli-attribuutin käyttö
Käytä HTML5-tukea varten style-attribuuttia, jonka arvo on text-align:center lohkotason elementin sisällä; kuten
-tunnisteet.
Esimerkki HTML-koodista
<p style="text-align:center;"><img src="https://www.computerhope.com/cdn/media/logo-200-gray.png" alt="Logo"></p>
Yllä olevan koodin sijoittaminen div-kenttään voi vaikuttaa siihen, miten se näkyy näytöllä. Esimerkiksi koodin lisääminen div:iin oikeanpuoleisella marginaalilla muuttaa keskellä olevan kuvan sijaintia.
Yllä olevan tyylin lisääminen tulisi mieluiten tehdä vain kerran asiakirjassa. Jos haluat keskittää useita kuvia, käytä alla olevaa ehdotusta ja luo CSS-luokka, joka auttaa vähentämään ylimääräistä koodia ja nopeuttamaan verkkosivuasi.
Esimerkki kuvakeskuksesta käyttämällä yllä olevaa koodia
Muunnetaan lohkotason elementiksi
Yksi tapa keskittää kuvat oikein on määrittää -elementti lohkotason elementiksi. Voit tehdä tämän lisäämällä säännön sivusi otsikkoon (näkyy seuraavassa esimerkissä) tai linkitettyyn ulkoiseen CSS-tiedostoon.
Esimerkki HTML-koodista
<style type="text/css">
.centerImage
{
text-align:center;
display:block;
}
</style>
Tämän koodin avulla voit käyttää centerImage-luokkaa -tunnisteeseen ilman, että sinun tarvitsee upottaa sitä lohkotason elementtiin. Tämä menetelmä toimii useille kuville.
Esimerkki keskitetty kuvakoodi
<img src="https://www.computerhope.com/cdn/media/logo-200-gray.png" class="centerImage" alt="CH Logo" height="120" width="350">
-tunnisteen käyttäminen
Voit keskittää kuvan liittämällä -tunnisteen
Esimerkki HTML-koodista
<center><img src="https://www.computerhope.com/cdn/media/logo-200-gray.png" alt="what image shows" height="150" width="200"></center>
