Come centrare un'immagine usando Text Align: Center

Un elemento è un elemento in linea (valore visualizzato di inline-block). Può essere facilmente centrato aggiungendo la text-align: center;proprietà CSS all'elemento genitore che lo contiene.

Per centrare un'immagine utilizzando text-align: center;è necessario posizionare l' interno di un elemento a livello di blocco come un file div. Poiché la text-alignproprietà si applica solo agli elementi a livello di blocco, posizionare text-align: center;l'elemento a livello di blocco di avvolgimento per ottenere un centraggio orizzontale .

Esempio

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

Nota: l'elemento genitore deve essere un elemento blocco. Se non è un elemento blocco, dovresti aggiungere ladisplay: block;proprietà CSS insieme allatext-alignproprietà.

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

Demo: Codepen

Adatta oggetto

Una volta centrata l'immagine, potresti volerla ridimensionare. La object-fitproprietà specifica come un elemento risponde alla larghezza / altezza della sua casella genitore.

Questa proprietà può essere utilizzata per immagini, video o qualsiasi altro supporto. Può anche essere utilizzato con la object-positionproprietà per ottenere un maggiore controllo sulla modalità di visualizzazione del supporto.

Fondamentalmente usiamo la object-fitproprietà per definire come allungare o schiacciare un supporto in linea.

Sintassi

.element 

Valori

  • fill: Questo è il valore predefinito . Ridimensiona il contenuto in modo che corrisponda alla sua casella principale indipendentemente dalle proporzioni.
  • contain: Ridimensiona il contenuto per riempire il riquadro principale utilizzando le proporzioni corrette.
  • cover: simile containma spesso ritaglia il contenuto.
  • none: visualizza l'immagine nella sua dimensione originale.
  • scale-down: confronta la differenza tra nonee containper trovare la dimensione dell'oggetto in calcestruzzo più piccola.

Compatibilità del browser

Il object-fitè supportato dalla maggior parte dei browser moderni, per le informazioni più aggiornate circa la compatibilità è possibile controllare questo fuori //caniuse.com/#search=object-fit.

Documentazione

  • text-align - MDN
  • adattamento all'oggetto - MDN
  • - MDN