Kuidas pildi tsentreerida teksti joondamise abil: keskele
Element on inline element (kuva väärtus inline-block
). Selle saab hõlpsalt keskele lisada, lisades text-align: center;
CSS-i vara seda sisaldavale vanemelemendile.
Pildi tsentreerimiseks text-align: center;
peate paigutama
plokitaseme elemendi, näiteks a div
., Sisemuse . Kuna text-align
atribuut kehtib ainult plokitaseme elementide kohta, text-align: center;
asetate selle horisontaalselt keskele jõudmiseks pakkimisploki tasandi elemendile
.
Näide
Center an Image using text align center .img-container { text-align: center; }
Märkus . Vanemelement peab olema plokielement. Kui see pole blokeerimiselement, peaksitedisplay: block;
koostext-align
atribuudigalisamaCSS-iatribuudi.
Center an Image using text align center .img-container { text-align: center; display: block; }
Demo: Codepen
Object Fit
Kui teie pilt on keskel, võiksite selle suurust muuta. object-fit
Vara Määrab, kuidas element reageerib laius / kõrgus see vanem kast.
Seda omadust saab kasutada piltide, video või muu meedia jaoks. Seda saab kasutada ka koos object-position
atribuudiga, et paremini kontrollida, kuidas meediumit kuvatakse.
Põhimõtteliselt kasutame object-fit
atribuuti, et määratleda, kuidas see sisemist meediumit venitab või lahutab.
Süntaks
.element
Väärtused
fill
: See on vaikeväärtus . Muutke sisu suurust, et see vastaks selle vanemakastile, olenemata kuvasuhtest.contain
: Muutke sisu suurust, et täita selle põhikast, kasutades õiget kuvasuhet.cover
: sarnane,contain
kuid sageli sisu kärpimisega.none
: kuvage pilt algses suuruses.scale-down
: võrrelge erinevustnone
jacontain
leidke väikseim konkreetse objekti suurus.
Brauseri ühilduvus
Seda object-fit
toetab enamik tänapäevaseid brausereid. Värskeima teabe saamiseks ühilduvuse kohta saate seda vaadata //caniuse.com/#search=object-fit.
Dokumentatsioon
- teksti joondamine - MDN
- objektile sobiv - MDN
- MDN