Heim  >  Artikel  >  Web-Frontend  >  Wie zentriere ich ein zugeschnittenes Bild horizontal mit CSS?

Wie zentriere ich ein zugeschnittenes Bild horizontal mit CSS?

Patricia Arquette
Patricia ArquetteOriginal
2024-10-27 02:57:03503Durchsuche

How to Center a Cropped Image Horizontally Using CSS?

So richten Sie ein Bild mithilfe von CSS horizontal aus

Wenn Sie versuchen, ein Bild horizontal zu zentrieren, bietet CSS eine effektive Lösung. Bei dieser Frage zeigt der Benutzer ein Bild mit HTML an und schneidet es mit CSS zu. Allerdings stoßen sie auf Schwierigkeiten, das zugeschnittene Bild zu zentrieren.

Um dieses Problem zu beheben, können die folgenden CSS-Regeln angewendet werden:

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

Durch Hinzufügen der Center-Klasse zum Bildelement wird es kann horizontal zentriert werden:

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

Diese CSS-Regeln erzielen den gewünschten Effekt, indem sie das Bild so einstellen, dass es als Blockelement angezeigt wird, und den linken und rechten Rand automatisch anpassen. Dadurch wird das Bild in seinem Container zentriert.

Das obige ist der detaillierte Inhalt vonWie zentriere ich ein zugeschnittenes Bild horizontal mit CSS?. 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