Kuinka keskittää kuva pysty- ja vaakasuunnassa CSS: llä

Monet kehittäjät kamppailevat työskennellessään kuvien kanssa. Reagoivuuden ja kohdistuksen käsittely on erityisen vaikeaa, erityisesti kuvan keskittäminen sivun keskelle.

Joten tässä viestissä esitän joitain yleisimpiä tapoja keskittää kuva sekä pysty- että vaakasuunnassa käyttämällä erilaisia ​​CSS-ominaisuuksia.

Olen käynyt läpi CSS: n sijainti- ja näyttöominaisuudet edellisessä viestissäni. Jos et tunne näitä ominaisuuksia, suosittelen tarkistaa nämä viestit ennen tämän artikkelin lukemista.

Tässä on videoversio, jos haluat tarkistaa sen:

Kuvan keskittäminen vaakasuunnassa

Aloitetaan kuvan keskittämisestä vaakasuoraan käyttämällä 3 erilaista CSS-ominaisuutta.

Tekstin tasaus

Ensimmäinen tapa keskittää kuva vaakasuoraan on text-alignominaisuuden käyttö. Tämä menetelmä toimii kuitenkin vain, jos kuva on lohkotason säilössä, kuten :

 div { text-align: center; } 

Reuna: Automaattinen

Toinen tapa keskittää kuva on käyttää margin: autoominaisuutta (vasen ja oikea marginaali).

Pelkkä käyttö margin: autoei kuitenkaan toimi kuvien kanssa. Jos haluat käyttää margin: auto, sinun on käytettävä myös 2 lisäominaisuutta.

Marginaali-auto-ominaisuudella ei ole vaikutuksia sisäisen tason elementteihin. Koska tagi on inline-elementti, meidän on ensin muunnettava se lohkotason elementiksi:

img { margin: auto; display: block; }

Toiseksi meidän on määriteltävä myös leveys. Joten vasen ja oikea marginaali voivat viedä loput tyhjästä ja kohdistaa itsensä automaattisesti, mikä tekee temppun (ellemme anna sille 100% leveyttä):

img { width: 60%; margin: auto; display: block; }

Näyttö: Joustava

Kolmas tapa keskittää kuva vaakasuunnassa on display: flex. Aivan kuten käytimme text-alignomaisuutta konttiin, käytämme display: flexmyös konttiin.

Pelkkä käyttö display: flexei kuitenkaan riitä. Säiliössä on oltava myös lisäominaisuus nimeltä justify-content:

div { display: flex; justify-content: center; } img { width: 60%; }

justify-contentOmaisuus toimii yhdessä display: flex, joita voimme käyttää, jotta kuva vaakasuunnassa.

Lopuksi kuvan leveyden on oltava pienempi kuin säiliön leveys, muuten se vie 100% tilasta, emmekä voi sitten keskittää sitä.

Tärkeää:display: flex omaisuutta ei tueta vanhemmissa versioissa selaimissa. Katso täältä lisätietoja.

Kuvan keskittäminen pystysuunnassa

Näyttö: Joustava

Pystysuorassa kohdistuksessa käyttö display: flexon jälleen todella hyödyllistä.

Tarkastellaan tapausta, jossa säiliömme korkeus on 800 kuvapistettä, mutta kuvan korkeus on vain 500 kuvapistettä:

div { display: flex; justify-content: center; height: 800px; } img { width: 60%; height: 500px; }

Nyt tässä tapauksessa yhden koodirivin lisääminen säilöön align-items: centertekee temppun:

div { display: flex; justify-content: center; align-items: center; height: 800px; }

align-itemsOminaisuus voi kanta elementtejä pystysuunnassa, jos niitä käytetään yhdessä display: flex.

Sijainti: Absolute & Transform Properties

Toinen menetelmä pystysuoraan kohdistamiseen on käyttämällä positionja transformominaisuuksia yhdessä. Tämä on vähän monimutkainen, joten tehdään se askel askeleelta.

Vaihe 1: Määritä absoluuttinen sijainti

Ensinnäkin muutamme kuvan sijaintikäyttäytymisen staticseuraavaksi absolute:

div { height: 800px; position: relative; background: red; } img { width: 80%; position: absolute; }

Lisäksi sen tulisi olla suhteellisen sijoitetun astian sisällä, joten lisäämme position: relativesen säiliöön div.

Vaihe 2: Määritä ylä- ja vasemmanpuoleiset ominaisuudet

Toiseksi määritämme kuvan ylä- ja vasemmanpuoleiset ominaisuudet ja asetamme ne 50 prosenttiin. Tämä siirtää kuvan aloituskohdan (vasemmassa yläkulmassa) säiliön keskelle:

img { width: 80%; position: absolute; top: 50%; left: 50%; }

Vaihe 3: Määritä muunnosominaisuus

Mutta toinen vaihe on siirtänyt kuvan osittain säiliön ulkopuolelle. Joten meidän on tuotava se takaisin sisälle.

transformOminaisuuden määritteleminen ja -50% lisääminen sen X- ja Y-akselille tekee temppun:

img { width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

On muitakin tapoja keskittää asiat vaaka- ja pystysuunnassa, mutta olen selittänyt yleisimmät. Toivon, että tämä viesti auttoi sinua ymmärtämään, miten kuvasi kohdistetaan sivun keskelle.

Jos haluat oppia lisää verkkokehityksestä, vieraile lisää Youtube-kanavallani.

Kiitos, että luit!