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-alignatribuut 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-alignatribuudigalisamaCSS-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-fitVara 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-positionatribuudiga, et paremini kontrollida, kuidas meediumit kuvatakse.

Põhimõtteliselt kasutame object-fitatribuuti, 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, containkuid sageli sisu kärpimisega.
• none: kuvage pilt algses suuruses.
• scale-down: võrrelge erinevust noneja containleidke väikseim konkreetse objekti suurus.

Brauseri ühilduvus

Seda object-fittoetab 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