So zentrieren Sie ein Bild mit Text Align: Center

Programmierung

Ein Element ist ein Inline-Element (Anzeigewert von inline-block). Es kann einfach zentriert werden, indem die text-align: center;CSS-Eigenschaft dem übergeordneten Element hinzugefügt wird , das sie enthält.

Um ein Bild mit zu text-align: center;zentrieren, müssen Sie das Innere eines Elements auf Blockebene platzieren, z div. Da die text-alignEigenschaft nur für Elemente auf Blockebene gilt, platzieren Sie sie text-align: center;auf dem Element auf Blockebene, um eine horizontale Zentrierung zu erzielen .

Beispiel

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

Hinweis: Das übergeordnete Element muss ein Blockelement sein. Wenn es sich nicht um ein Blockelement handelt, sollten Sie diedisplay: block;CSS-Eigenschaft zusammen mit dertext-alignEigenschafthinzufügen.

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

Demo: Codepen

Objektanpassung

Sobald Ihr Bild zentriert ist, möchten Sie möglicherweise die Größe ändern. Die object-fitEigenschaft gibt an, wie ein Element auf die Breite / Höhe des übergeordneten Felds reagiert.

Diese Eigenschaft kann für Bilder, Videos oder andere Medien verwendet werden. Es kann auch mit der object-positionEigenschaft verwendet werden, um mehr Kontrolle darüber zu erhalten, wie das Medium angezeigt wird.

Grundsätzlich verwenden wir die object-fitEigenschaft, um zu definieren, wie ein Inline-Medium gedehnt oder gequetscht wird.

Syntax

.element

Werte

  • fill: Dies ist der Standardwert . Ändern Sie die Größe des Inhalts unabhängig vom Seitenverhältnis so, dass er mit dem übergeordneten Feld übereinstimmt.
  • contain: Ändern Sie die Größe des Inhalts, um das übergeordnete Feld mit dem richtigen Seitenverhältnis zu füllen.
  • cover: ähnlich wie, containaber oft den Inhalt beschneiden.
  • none: zeigt das Bild in seiner Originalgröße an.
  • scale-down: Vergleichen Sie den Unterschied zwischen noneund contain, um die kleinste konkrete Objektgröße zu ermitteln.

Browser-Kompatibilität

Das object-fitwird von den meisten modernen Browsern unterstützt, für die die aktuellsten Informationen über die Kompatibilität Sie dies aus //caniuse.com/#search=object-fit überprüfen können.

Dokumentation

  • Textausrichtung - MDN
  • Objektanpassung - MDN
  • - MDN