Heim >Web-Frontend >CSS-Tutorial >Wie zentriere ich ein Bild horizontal innerhalb eines Div?

Wie zentriere ich ein Bild horizontal innerhalb eines Div?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-12-26 04:46:11847Durchsuche

How Do I Horizontally Center an Image Inside a Div?

So zentrieren Sie ein Bild horizontal innerhalb eines Div-Elements

Sie haben Schwierigkeiten, ein Bild innerhalb seines Container-Div horizontal zu zentrieren. Obwohl versucht wird, die bereitgestellten Lösungen zu finden, besteht das Problem weiterhin.

Um dieses Problem zu beheben, berücksichtigen Sie das folgende CSS:

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

Diese Lösung verwendet die folgenden Techniken:

  1. Anzeige blockieren: Wenn Sie die Anzeige des Bildes auf „Block“ einstellen, kann es eine eigene Zeile einnehmen und als Blockelement behandelt werden, was die Arbeit erleichtert Zentrierung.
  2. Automatischer linker und rechter Rand: Der „margin:auto;“ Die Eigenschaft berechnet automatisch gleiche linke und rechte Ränder und sorgt so für eine horizontale Zentrierung.

Dieser Ansatz wurde in der folgenden Geige demonstriert und hat sich als wirksam erwiesen: http://jsfiddle.net/marvo/3k3CC/2/

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn