Wie zentriere ich ein Bild horizontal in seinem Div-Container?

So zentrieren Sie ein Bild horizontal innerhalb seines Container-Div

Problem:

Sie benötigen um ein Bild horizontal innerhalb seines enthaltenden div-Elements auszurichten. Hier ist der HTML- und CSS-Code für das problematische Setup:

<div>

#thumbnailwrapper {
  ...
}

#artiststhumbnail {
  width: 120px;
  height: 108px;
  overflow: hidden;
}

Lösung:

Um das Bild horizontal innerhalb seines Containers zu zentrieren, verwenden Sie das folgende CSS:

#artiststhumbnail a img {
    display:block;
    margin:auto;
}

Dieser Code gibt an, dass das Bild als Blockelement angezeigt werden soll und dass es auf allen Seiten automatische Ränder haben soll. Dadurch wird das Bild horizontal innerhalb seines Containers zentriert.

Erklärung:

Die Anzeige: block; Die Eigenschaft gibt an, dass das Bild als Blockelement behandelt werden soll. Das bedeutet, dass es die gesamte Breite seines Containers einnimmt und den Textfluss um ihn herum unterbricht.

Der Rand: auto; Die Eigenschaft gibt an, dass die Ränder auf allen Seiten des Bildes auf „Automatisch“ eingestellt werden sollen. Das bedeutet, dass der Browser die Ränder automatisch berechnet, sodass das Bild innerhalb seines Containers zentriert ist.

Diese Lösung stellt sicher, dass das Bild horizontal innerhalb seines Containers zentriert wird, unabhängig von der Größe des Containers oder des Bildes.

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