Kuvien keskittäminen CSS: llä

Haluatko keskittää kuvan CSS: n avulla? Kohdistusongelmat ovat usein turhautumisen lähde web-suunnittelijoille. Onneksi kuvan keskittäminen CSS: llä on todella yksinkertaista, ja näytämme sinulle, kuinka saat sen aikaan muutamassa vaiheessa.

Kuten monien web-suunnittelutehtävien kohdalla, tämä on useampi kuin yksi tapa! Käsittelemme tässä artikkelissa kolme päämenetelmää. Aloitetaan!

1. Käytä marginaaliominaisuutta

Asetetaan marginaali ominaisuus on yksi helpoimmista tavoista keskittää kuva vaakasuunnassa CSS: n avulla. Marginaalit ovat keskeinen osa CSS-laatikkomalli.

Ensin sinun on muutettava kuvaelementti rivinomaisesta lohkoelementiksi. Lohkotason HTML-elementit täyttävät yläelementtinsä koko leveyden ja pystyvät ottamaan koko sivun leveyden.

Kun kuvaelementistä tehdään lohkoelementti, voit muokata sen sijaintia säätämällä sen vaakamarginaaleja. Sinun on myös asetettava kuvalle tietty leveys, jotta voit määrittää, kuinka paljon tilaa kuva vie sivulla.

Valitsemastasi leveydestä riippumatta kuvan vasemman ja oikean marginaalin on oltava yhtä suuret. Voit saavuttaa tämän helposti antamalla marginaaliomaisuuden arvon

auto:

img.center {
 näyttö: lohko;
 marginaali vasen: auto;
 marginaali-oikea: auto;
 leveys: 800px;
}

2. Käytä Flexbox Layoutia

Tämä menetelmä edellyttää kuvan sijoittamista lohkotason elementtiin, yleensä a div:

Kun olet tehnyt tämän, voit muokata sen ulkonäköä lisäämällä ominaisuuksia. Käytät kahta CSS-ominaisuutta.

Ensimmäinen on näyttö ominaisuus, jonka arvo on asetettu flex. Voit myös Käytä flex-toimintoa elementtien kohdistamiseen HTML: ssä. Toinen diviin lisäämäsi ominaisuus on perustele-sisältö, jonka arvo on asetettu keskusta niin kuin:

div.center {
 näyttö: flex;
 perustele-sisältö: keskus;
}

3. Käytä vanhentunutta keskuselementtiä

Webin parhaat käytännöt rohkaisevat käyttämään CSS: ää muotoiluun ja HTML: ää semantiikkaan, joten sinun ei pitäisi käyttää tätä HTML-menetelmää. The keskusta -tunniste, joka keskittää sisällön vaakasuoraan, on vanhentunut HTML5:ssä.

Mutta jos sinun on pakko, tässä on ohjeet kuvan keskittämiseen pelkällä HTML-koodilla. Kääri yksinkertaisesti img tagi keskimmäisessä tagissa, kuten näin:

Näin kohdistat kuvat HTML: ssä

Olemme näyttäneet sinulle kolme erilaista, helppokäyttöistä tapaa keskittää kuvat HTML-dokumenttiin. Kokeile niitä kaikkia ja valitse sinulle parhaiten sopiva. Vältä kolmatta menetelmää, ellei sinulla ole mitään vaihtoehtoa!

Yksi asia, joka on pidettävä mielessä, on, että on olemassa useita muita tapoja keskittää kuvia HTML: n ja CSS: n avulla. Yksi yleinen menetelmä, joka toimii sekä tekstille että upotetuille kuville, on tekstin tasaus omaisuutta.

Web-sivun tekstin keskittäminen CSS: n avulla

Lue Seuraava

Kirjailijasta