In zwei Minuten lernen Sie drei Möglichkeiten kennen, ein Bild in CSS zu zentrieren.

Beim Verschönern von Webseiten verwenden Sie immer die Bildzentrierung. Wissen Sie, welche drei Möglichkeiten es gibt, Bilder in CSS zu zentrieren? Schauen wir uns unten um.

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

HTML-Code lautet wie folgt:

<div class="img_wrap">
　　<img src="wgs.jpg">
</div>

Der CSS-Code lautet wie folgt:

.img_wrap{
     width: 400px;
     height: 300px;
     border: 1px dashed #ccc;
     display: table-cell; //主要是这个属性
    vertical-align: middle;
     text-align: center;
 }效果如下：

2. Verwenden Sie die Hintergrundmethode:

Der HTML-Code lautet wie folgt:

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

Der CSS-Code lautet 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 Bildes und zentrieren Sie das Bild vertikal, indem Sie die Zeilenhöhe festlegen:

Der HTML-Code lautet wie folgt:

<div class="img_wrap">
    <p><img src="wgs.jpg"></p>
</div>

Der CSS-Code lautet wie folgt:

*{margin: 0px;padding: 0px}
.img_wrap{
    width: 400px;
    height: 300px;
    border: 1px dashed #ccc;
    text-align: center;}
.img_wrap p{
    width:400px;
    height:300px;
    line-height:300px;  /* 行高等于高度 */
 }
.img_wrap p img{
    *margin-top:expression((400 - this.height )/2);  /* CSS表达式用来兼容IE6/IE7 */
    vertical-align:middle;
    border:1px solid #ccc;
 }

Das Rendering lautet wie folgt:

Vielen Dank fürs Lesen, ich hoffe, Sie werden viel davon profitieren

Empfohlenes Tutorial: „CSS-Tutorial“

Das obige ist der detaillierte Inhalt vonIn zwei Minuten lernen Sie drei Möglichkeiten kennen, ein Bild in CSS zu zentrieren.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!