Kā centrēt attēlu, izmantojot teksta izlīdzināšanu:

Elements ir inline elements (displejs vērtība inline-block). To var viegli centrēt, pievienojot text-align: center;CSS rekvizītu vecākajam elementam, kas to satur.

Lai attēlu centrētu lietojot text-align: center;nepieciešams novietot iekšpusi bloka līmeņa elements, piemēram, div. Tā kā text-alignrekvizīts attiecas tikai uz bloku līmeņa elementiem, jūs ievietojat text-align: center;iesaiņojuma bloka līmeņa elementu, lai iegūtu horizontāli centrētu .

Piemērs

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

Piezīme . Vecākajam elementam jābūt bloka elementam. Ja tas nav bloķēšanas elements, jumsdisplay: block;kopā artext-alignīpašumujāpievienoCSSīpašums.

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

Demonstrācija: Codepen

Object Fit

Kad attēls ir centrēts, iespējams, vēlēsities to mainīt. Par object-fitīpašuma nosaka, kā elements atbild uz platums / augstums, tas ir mātes lodziņā.

Šo rekvizītu var izmantot attēlu, video vai jebkuram citam multividei. To var izmantot arī kopā ar object-positionīpašumu, lai labāk kontrolētu multivides parādīšanu.

Būtībā mēs izmantojam object-fitrekvizītu, lai noteiktu, kā tas izstiepj vai sagriež inline media.

Sintakse

.element 

Vērtības

• fill: Šī ir noklusējuma vērtība . Mainiet satura lielumu tā, lai tas atbilstu vecāku lodziņam neatkarīgi no proporcijas.
• contain: Mainiet satura lielumu, lai aizpildītu vecāku lodziņu, izmantojot pareizo malu attiecību.
• cover: līdzīgi kā, containbet bieži apgriež saturu.
• none: attēla parādīšana tā sākotnējā izmērā.
• scale-down: salīdziniet atšķirību starp noneun, containlai atrastu mazāko betona objekta izmēru.

Pārlūkprogrammu saderība

To object-fitatbalsta lielākā daļa mūsdienu pārlūkprogrammu, lai iegūtu jaunāko informāciju par saderību, skatiet šo vietni //caniuse.com/#search=object-fit.

Dokumentācija

• text-align - MDN
• objekts - MDN
• - MDN