Πώς να κεντράρετε μια εικόνα χρησιμοποιώντας την ευθυγράμμιση κειμένου: Κέντρο

Ένα στοιχείο είναι ένα ενσωματωμένο στοιχείο (τιμή εμφάνισης του inline-block). Μπορεί να κεντραριστεί εύκολα προσθέτοντας την text-align: center;ιδιότητα CSS στο γονικό στοιχείο που το περιέχει.

Για να κεντράρετε μια εικόνα χρησιμοποιώντας text-align: center;πρέπει να τοποθετήσετε το εσωτερικό ενός στοιχείου επιπέδου μπλοκ, όπως a div. Δεδομένου ότι η text-alignιδιότητα ισχύει μόνο για στοιχεία επιπέδου μπλοκ, τοποθετείτε text-align: center;στο στοιχείο περιτυλίγματος περιτυλίγματος για να επιτύχετε ένα οριζόντιο στο κέντρο .

Παράδειγμα

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

Σημείωση: Το γονικό στοιχείο πρέπει να είναι στοιχείο μπλοκ. Εάν δεν είναι στοιχείο αποκλεισμού, θα πρέπει να προσθέσετεdisplay: block;ιδιότητα CSS μαζί με τηνtext-alignιδιότητα.

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

Επίδειξη: Codepen

Αντικείμενο Fit

Μόλις η εικόνα σας είναι στο κέντρο, ίσως θέλετε να αλλάξετε το μέγεθός της. Η object-fitιδιότητα καθορίζει πώς ένα στοιχείο ανταποκρίνεται στο πλάτος / ύψος του γονικού πλαισίου του.

Αυτή η ιδιότητα μπορεί να χρησιμοποιηθεί για εικόνα, βίντεο ή οποιοδήποτε άλλο μέσο. Μπορεί επίσης να χρησιμοποιηθεί με την object-positionιδιότητα για να αποκτήσετε περισσότερο έλεγχο σχετικά με τον τρόπο εμφάνισης των μέσων.

Βασικά χρησιμοποιούμε την object-fitιδιότητα για να καθορίσουμε τον τρόπο με τον οποίο τεντώνει ή συμπιέζει ένα ενσωματωμένο μέσο.

Σύνταξη

.element 

Αξίες

  • fill: Αυτή είναι η προεπιλεγμένη τιμή . Αλλαγή μεγέθους του περιεχομένου για να ταιριάζει με το γονικό του πλαίσιο ανεξάρτητα από το λόγο διαστάσεων
  • contain: Αλλάξτε το μέγεθος του περιεχομένου για να συμπληρώσετε το γονικό πλαίσιο χρησιμοποιώντας τη σωστή αναλογία διαστάσεων.
  • cover: παρόμοιο με, containαλλά συχνά περικόπτει το περιεχόμενο.
  • none: εμφάνιση της εικόνας στο αρχικό της μέγεθος.
  • scale-down: συγκρίνετε τη διαφορά μεταξύ noneκαι containγια να βρείτε το μικρότερο μέγεθος αντικειμένου σκυροδέματος.

Συμβατότητα προγράμματος περιήγησης

Η object-fitυποστηρίζεται από τα περισσότερα από τα σύγχρονα προγράμματα περιήγησης, το πιο ενημερωμένο πληροφορίες σχετικά με τη συμβατότητα, μπορείτε να ελέγξετε αυτό έξω //caniuse.com/#search=object-fit.

Τεκμηρίωση

  • text-align - MDN
  • object-fit - MDN
  • - MDN