Kuidas tsentreerida pilti vertikaalselt ja horisontaalselt CSS-iga

Paljud arendajad näevad piltidega töötades vaeva. Reageerimisvõime ja joonduse käsitlemine on eriti karm, eriti pildi tsentreerimine lehe keskel.

Nii et selles postituses näitan mõningaid levinumaid viise pildi tsentreerimiseks nii vertikaalselt kui ka horisontaalselt, kasutades erinevaid CSS-i atribuute.

Olen oma eelmises postituses CSS-i positsiooni ja kuva omadusi üle vaadanud. Kui te pole nende omadustega tuttav, soovitan enne selle artikli lugemist neid postitusi vaadata.

Siin on videoversioon, kui soovite seda kontrollida:

Pildi tsentreerimine horisontaalselt

Alustame pildi horisontaalsest tsentreerimisest, kasutades kolme erinevat CSS-i omadust.

Teksti joondamine

Esimene viis pildi horisontaalseks tsentreerimiseks on text-alignatribuudi kasutamine. See meetod töötab aga ainult siis, kui pilt on plokitaseme konteineris, näiteks :

 div { text-align: center; } 

Marginaal: automaatne

Teine võimalus pildi tsentreerimiseks on margin: autoatribuudi kasutamine (vasak- ja parempoolse veerise jaoks).

Kuid margin: autoüksi kasutamine piltide jaoks ei toimi. Kui peate seda kasutama margin: auto, peate kasutama ka 2 täiendavat omadust.

Atribuudil marginaal-auto ei ole mingit mõju rea taseme elementidele. Kuna silt on tekstisisene element, peame selle kõigepealt teisendama plokitaseme elemendiks:

img { margin: auto; display: block; }

Teiseks peame määratlema ka laiuse. Nii et vasak ja parem veeris võivad ülejäänud tühja ruumi võtta ja ennast automaatselt joondada, mis teeb selle triki (kui me ei anna sellele laiust 100%):

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

Ekraan: Flex

Kolmas viis pildi horisontaalseks tsentreerimiseks on display: flex. Täpselt nagu kasutasime text-alignvara konteineri jaoks, kasutame display: flexseda ka konteineri jaoks.

Kuid display: flexüksi kasutamisest ei piisa. Konteineril peab olema ka täiendav atribuut nimega justify-content:

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

justify-contentVara töötab koos display: flex, mida me saame kasutada oleva pildi keskele horisontaalselt.

Lõpuks peab pildi laius olema väiksem kui konteineri laius, vastasel juhul võtab see ruumi 100% ja siis ei saa me seda tsentreerida.

Tähtis:display: flex vara ei toeta vanemad versioonid brauseritega. Lisateavet leiate siit.

Pildi vertikaalne tsentreerimine

Ekraan: Flex

Vertikaalseks joondamiseks on kasutamine display: flexjällegi tõesti kasulik.

Vaatleme juhtumit, kus meie konteineri kõrgus on 800 pikslit, kuid pildi kõrgus on ainult 500 pikslit:

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

Sel juhul lisab konteinerile ühe koodirea lisamine align-items: center:

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

align-itemsOmadust saab asendis elemendid vertikaalselt kui seda kasutatakse koos display: flex.

Positsioon: Absoluutsed ja teisendusomadused

Teine vertikaalse joondamise meetod on omaduste positionja transformomaduste koos kasutamine. See on natuke keeruline, nii et teeme seda samm-sammult.

1. samm: määrake absoluutne positsioon

Esiteks muudame pildi positsioneerimiskäitumist staticjärgmiselt absolute:

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

Samuti peaks see olema suhteliselt paigutatud konteineris, nii et lisame position: relativeselle konteinerisse div.

2. samm: määratlege üla- ja vasakpoolsed atribuudid

Teiseks määratleme pildi üla- ja vasakpoolsed omadused ning määrame neile 50%. See nihutab pildi alguspunkti (üleval vasakul) konteineri keskele:

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

3. samm: määratlege teisendusomadus

Kuid teine ​​samm on pildi osaliselt mahutist välja viinud. Nii et peame selle uuesti sisse tooma.

Atribuudi määratlemine transformja selle X- ja Y-teljele -50% lisamine teeb trikki:

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

Asjade horisontaalseks ja vertikaalseks tsentreerimiseks on muid võimalusi, kuid ma olen selgitanud kõige tavalisemaid. Loodan, et see postitus aitas teil mõista, kuidas oma pilte lehe keskel joondada.

Kui soovite veebiarenduse kohta rohkem teada saada, külastage lisateavet minu Youtube'i kanalilt.

Aitäh, et lugesid!