HTML ja CSS ovat verkkokieliä, jotka strukturoivat sekä verkkosivut että sovellukset. Erityisesti HTML-kieli tukee verkkosuunnittelun päärakennetta. CSS:n avulla voit luoda dynaamisia tai animoituja tyylejä kyseisen verkkosivun tai sovelluksen esitykseen.
Kuvan keskittäminen HTML:llä
HTML-kieltä käytetään vähemmän suunnitteluun, mutta se tarjoaa etuna paljon kevyemmän rakenteen, jota voidaan soveltaa melkein kaikkiin verkkosivun ominaisuuksiin.
Keskittämiseen center-tagi
Ensimmäinen koodivaihtoehto, jonka voit ottaa käyttöön, on ”center” tai <center> -tagi.
Tässä määritellään ”src” kohdasta ”img” kuvan pääpolulle ja kuvan ominaisuuden nimi ”alt”.
<center>
<img src=”tecnohowto.png” alt=”Kuvan kuvaus”>
</center>
Sen jälkeen voit asettaa kuvan leveyden ja korkeuden seuraavalla komennolla ”height” ja ”width”
<center>
<img src=”tecnohowto.png” alt=”Kuvan kuvaus”> height=”250” width=200”
</center>
Middle-tagin asettaminen
Middle-koodi tarjoaa edun kuvata kohdistaa tai keskittää HTML:llä ja huomioida ympäröivä teksti. Se näyttää seuraavalta
<img src=”tecnohowto.png” alt=”Esimerkin kuvaus kuvassa” align=”middle” />
Kun lisäät tekstiä ja sen ominaisuuksia, ne tunnistetaan seuraavasti.
<p> Tällä koodilla voit keskittää kuvan tekstillä HTML:ssä. <img src=”tecnohowto.png” alt=”Kuvaesimerkin kuvaus” align=”middle”/> Esimerkkitekstin kautta. </p>
Kuvan keskittäminen html:n Align-koodilla
Vaikka kuvan perustelu hltm:ssä align-ominaisuuden avulla ei olekaan esteettisyyden ja mukavuuden vuoksi suositeltavaa, koska sitä voidaan käsitellä helposti CSS:llä, se on silti nopein tapa tehdä se.
Ensimmäinen asia, jonka tarvitset, on lisätä <img>-koodi tai -ominaisuus <p>– tai <div>-tunnisteiden sisälle
<div align=”center”><img src=”tecnohowto.png”></div>
Näin align-ominaisuus asettaa kuvan vasemmalle tai oikealle ja täyttää loput tekstillä niin, että se ympäröi tekstiä ja antaa segmentille tyyliä.
Kuten esimerkissä, sinun tulee käyttää ”right” tai ”left”-termejä kohdistamaan kuva suhteessa tekstiin.
<p><img src=”tecnohowto.png” align=”right”>Näin tekstikenttä ympäröi kuvan oikeassa reunassa ja luo uuden suunnittelun sekä kuvaan että se osa-alueeseen. Esimerkki on melko yksinkertainen mutta helppo toteuttaa.</p>
<p><img src=”tecnohowto.png” align=”left”>Näin tekstikenttä ympäröi kuvan vasemmassa reunassa ja luo uuden suunnittelun sekä kuvaan että se osa-alueeseen. Esimerkki on melko yksinkertainen mutta helppo toteuttaa.</p>
Kuvan keskittäminen CSS:llä
Kun tiedetään, että CSS perustuu HTML:n määrittelemään kieleen, on tarpeen liittää kuva tunnisteensa alle.
<img class=”centrar” src=”tecnohowto.png” alt=”Tecnohowto-esimerkki”>
Kun kuva on tunnistettu luokalla ”Centrar”, riittää, että lisäät CSS-koodin, joka vastaa kuvan keskittämisominaisuutta verkkosivun sisällä. Ilmaistaan, että marginaali pysyy 10 pikselin etäisyydellä ja mukautuu automaattisesti näytettävän näytön mittoihin.
.centrar{
margin:10px auto;
display:block;
}
Toinen tapa soveltaa CSS:ää kuvan kohdistamiseen on seuraava koodi. Siinä manipuloit pelkästään marginaalien, sekä vasemman että oikean, mittoja niin, että ne mukautuvat tulostettavassa näytössä, ja näin keskität aina kuvan.
Img-lohkon tunnistaminen
Aiemmissa vaihtoehdoissa voi ilmetä tilanne, jossa tekstit vaihtavat kuvaa eikä tavoite keskittää tai kohdistaa sitä täyty.
Tässä tapauksessa ratkaisu olisi segmentoida lohkot ja tunnistaa ne img:llä. Näin koodi lisätään
img.centrar {
display: block;
margin-left: auto;
margin-right: auto;
}
Näin kuva erottuu tekstistä ja sille asetetaan automaattinen marginaali, jotta kuva kohdistuu vaakasuunnassa näytön leveyteen nähden.
Kuvan keskittäminen Bootstrapilla
Tämän kirjaston koodi tekee verkkokehityksestä erittäin helppoa; tässä tapauksessa riittää, että lisäät seuraavan esimerkin kuvan sijainnilla ja sen vaihtoehtoisella tekstillä tämän komennon käyttämiseksi.
<img class=”center-block” src=”tecnohowto.png” alt=”tecnohowto-esimerkki”>
Näin voit keskittää kuvan vain muutamalla Html- ja Css-koodilla ja nauttia kevyen ja tehokkaan suunnittelun eduista.