Wie zentriere ich ein zugeschnittenes Bild horizontal in CSS?

Ein Bild horizontal mit CSS zentrieren

Bei der Anzeige eines Bildes auf einer Webseite ist es oft wünschenswert, es horizontal in der Mitte auszurichten. Allerdings kann das Zuschneiden eines Bilds, um nur einen Teil anzuzeigen, diesen Vorgang erschweren.

In Ihrem bereitgestellten HTML-Code verwenden Sie „Clip“, um das Bild zuzuschneiden, aber Sie stoßen auf Schwierigkeiten, das zugeschnittene Bild zu zentrieren. Hier ist eine Lösung für Ihr Problem:

Lösung:

Um ein zugeschnittenes Bild horizontal zu zentrieren, können Sie die CSS-Eigenschaften margin-left und margin-right verwenden. Hier ist der aktualisierte Code:

<code class="css">.center img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}</code>

Fügen Sie das Attribut „class="center"“ zu dem Bild hinzu, das Sie zentrieren möchten:

<code class="html"><div id="loading" class="loading-invisible">
  <img class="loading center" src="logo.png">
</div></code>

Erklärung:

• Die Eigenschaft display: block stellt sicher, dass das Bild die volle Breite seines übergeordneten Elements einnimmt.
• Die Eigenschaften margin-left und margin-right: auto setzen den linken und rechten Rand auf „ auto“, wodurch der verbleibende Platz automatisch gleichmäßig um das Bild herum verteilt und es effektiv zentriert wird.

Das obige ist der detaillierte Inhalt vonWie zentriere ich ein zugeschnittenes Bild horizontal in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!