Drei Möglichkeiten, Bilder mit CSS zu zentrieren

In unserem WEB-Frontend-CSS-Entwicklungsprozess vermeiden wir die Situation, das Bild zu zentrieren. Aus Gründen der Schönheit der Webseite und des Benutzererlebnisses müssen wir manchmal das Bild zentrieren, daher wissen wir alle, wie Es gibt viele Möglichkeiten, das Bild zu zentrieren, und heute geben wir Ihnen eine detaillierte Einführung in die drei Möglichkeiten, Bilder mit CSS zu zentrieren!

1. Verwenden Sie display:table-cell. Der spezifische Code lautet wie folgt:

HTML-Code lautet wie folgt:

1 <p class="img_wrap">
2  <img src="wgs.jpg">
3 </p>

CSS-Code lautet wie folgt:

1 .img_wrap{
2     width: 400px;
3     height: 300px;
4     border: 1px dashed #ccc;
5     display: table-cell; //主要是这个属性
6     vertical-align: middle;
7     text-align: center;
8 }

Der Effekt ist wie folgt:

2. Verwenden Sie die Hintergrundmethode:

HTML-Code lautet wie folgt:

1 <p class="img_wrap"></p>

CSS-Code ist wie folgt:

.img_wrap{
    width: 400px;
    height: 300px;
    border: 1px dashed #ccc;
    background: url(wgs.jpg) no-repeat center center;
}

Der Effekt ist wie folgt:

3 Verwenden Sie ein p-Tag außerhalb des Bild und legen Sie die Linienhöhe fest, um das Bild vertikal zu zentrieren:

HTML-Code lautet wie folgt:

1 <p class="img_wrap">
2     <p><img src="wgs.jpg"></p>
3 </p>

CSS-Code lautet wie folgt:

 1 *{margin: 0px;padding: 0px} 
 2 .img_wrap{ 
 3     width: 400px; 
 4     height: 300px; 
 5     border: 1px dashed #ccc; 
 6     text-align: center;} 
 7 .img_wrap p{ 
 8     width:400px; 
 9     height:300px;
 10     line-height:300px;  /* 行高等于高度 */
 11 }
 12 .img_wrap p img{
 13     *margin-top:expression((400 - this.height )/2);  /* CSS表达式用来兼容IE6/IE7 */
 14     vertical-align:middle;
 15     border:1px solid #ccc;
 16 }

Die Darstellung ist wie folgt:

Zusammenfassung:

Es gibt viele Hier stellen wir drei häufig verwendete Methoden vor. Wählen Sie die Methode aus, die zu Ihnen passt. Ich hoffe, dass sie für Ihre Arbeit hilfreich ist.

Verwandte Empfehlungen:

So zentrieren Sie das CSS-Bild

CSS-Bildzentrierung: CSS-Bildzentrierung nach oben, unten, links und rechts (horizontal und vertikal zentriert)

So zentrieren Sie Text und Bilder im HTML-Code?

Das obige ist der detaillierte Inhalt vonDrei Möglichkeiten, Bilder mit CSS zu zentrieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!