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-align
rekvizī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-fit
rekvizī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ā,contain
bet bieži apgriež saturu.none
: attēla parādīšana tā sākotnējā izmērā.scale-down
: salīdziniet atšķirību starpnone
un,contain
lai atrastu mazāko betona objekta izmēru.
Pārlūkprogrammu saderība
To object-fit
atbalsta 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