Sådan centreres et billede ved hjælp af tekstjustering: Center

Et element er et indbygget element (visningsværdi på inline-block). Det kan let centreres ved at tilføje text-align: center;CSS-egenskaben til det overordnede element, der indeholder den.

For at centrere et billede ved hjælp af text-align: center;skal du placere indersiden af ​​et element på blokniveau som f.eks div. Da text-alignejendommen kun gælder for blokniveauer, placerer du text-align: center;på indpakningsblokkeniveauelementet for at opnå et vandret centreret .

Eksempel

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

Bemærk: Det overordnede element skal være et blokelement. Hvis det ikke er et blokelement, skal du tilføjedisplay: block;CSS-egenskab sammen medtext-alignejendommen.

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

Demo: Codepen

Objektpasning

Når dit billede er centreret, vil du måske ændre størrelsen på det. De object-fitegenskab angiver, hvordan et Element svarer på bredden / højden af det overordnede kassen.

Denne egenskab kan bruges til billede, video eller andre medier. Det kan også bruges sammen med object-positionejendommen for at få mere kontrol over, hvordan mediet vises.

Grundlæggende bruger vi object-fitegenskaben til at definere, hvordan den strækker eller klemmer et indbygget medie.

Syntaks

.element 

Værdier

• fill: Dette er standardværdien . Ændr størrelsen på indholdet, så det matcher dets overordnede felt uanset størrelsesforholdet.
• contain: Ændr størrelsen på indholdet for at udfylde det overordnede felt ved hjælp af det korrekte billedformat.
• cover: ligner containmen beskærer ofte indholdet.
• none: viser billedet i dets originale størrelse.
• scale-down: Sammenlign forskellen mellem noneog for containat finde den mindste størrelse af konkret genstand.

Browser Kompatibilitet

Det object-fitunderstøttes af de fleste moderne browsere, for den mest opdaterede information om kompatibilitet kan du tjekke dette ud //caniuse.com/#search=object-fit.

Dokumentation

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