Slik sentrerer du et bilde ved hjelp av tekstjustering: Senter

Et element er et innebygd element (visningsverdi på inline-block). Det kan enkelt sentreres ved å legge til text-align: center;CSS-egenskapen til det overordnede elementet som inneholder den.

For å sentrere et bilde text-align: center;må du plassere innsiden av et blokknivåelement som f.eks div. Siden text-alignegenskapen bare gjelder elementer på blokknivå, plasserer du text-align: center;på elementet på innpakningsblokknivå for å oppnå et horisontalt sentrert .

Eksempel

   Center an Image using text align center  .img-container { text-align: center; }

Merk: Overordnet element må være et blokkelement. Hvis det ikke er et blokkelement, bør du legge tildisplay: block;CSS-egenskap sammen medtext-aligneiendommen.

   Center an Image using text align center  .img-container { text-align: center; display: block; }

Demo: Codepen

Objekttilpasning

Når bildet ditt er sentrert, vil du kanskje endre størrelsen på det. Den object-fitegenskapen angir hvordan et element svarer til bredden / høyden på det overordnede boksen.

Denne egenskapen kan brukes til bilde, video eller andre medier. Den kan også brukes med object-positioneiendommen for å få mer kontroll over hvordan media vises.

I utgangspunktet bruker vi object-fitegenskapen til å definere hvordan den strekker eller klemmer et innebygd medium.

Syntaks

.element

Verdier

  • fill: Dette er standardverdien . Endre størrelsen på innholdet slik at det samsvarer med det overordnede feltet, uavhengig av størrelsesforholdet.
  • contain: Endre størrelsen på innholdet for å fylle den overordnede boksen ved å bruke riktig størrelsesforhold.
  • cover: lik som containmen ofte beskjærer innholdet.
  • none: viser bildet i original størrelse.
  • scale-down: sammenlign forskjellen mellom noneog for containå finne den minste konkrete gjenstandsstørrelsen.

Nettleserkompatibilitet

Den object-fitstøttes av de fleste moderne nettlesere, for den mest oppdaterte informasjonen om kompatibilitet kan du sjekke dette //caniuse.com/#search=object-fit.

Dokumentasjon

  • tekstjustering - MDN
  • objekt-fit - MDN
  • - MDN