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-align
atribuudi 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: auto
atribuudi 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-align
vara konteineri jaoks, kasutame display: flex
seda 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-content
Vara 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: flex
jä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-items
Omadust saab asendis elemendid vertikaalselt kui seda kasutatakse koos display: flex
.
Positsioon: Absoluutsed ja teisendusomadused
Teine vertikaalse joondamise meetod on omaduste position
ja transform
omaduste koos kasutamine. See on natuke keeruline, nii et teeme seda samm-sammult.
1. samm: määrake absoluutne positsioon
Esiteks muudame pildi positsioneerimiskäitumist static
jä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: relative
selle 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 transform
ja 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!