So stellen Sie die Bildposition in CSS auf die Mitte ein

So zentrieren Sie das Bild in CSS: Sie können ein p-Tag außerhalb des Bildes hinzufügen und dann das Bild zentrieren, indem Sie das Attribut „Zeilenhöhe“ festlegen, z. B. [

p> Zeilenhöhe:300px;].

Die Betriebsumgebung dieses Artikels: Windows 10-System, CSS 3, Thinkpad T480-Computer.

Die spezifische Methode lautet wie folgt:

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" alt="So stellen Sie die Bildposition in CSS auf die Mitte ein" >
</div>

CSS-Code lautet wie folgt:

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

Der Effekt ist wie folgt:

2. Hintergrundmethode verwenden: Der

HTML-Code lautet wie folgt:

<div class="img_wrap"></div>

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:

(Lernvideo Teilen: CSS-Video-Tutorial)

3. Verwenden Sie ein p-Tag außerhalb des Bildes und übergeben Sie die Zeilenhöhe, um das Bild vertikal zu zentrieren:

HTML-Code lautet wie folgt:

 <div class="img_wrap">
     <p><img  src="wgs.jpg" alt="So stellen Sie die Bildposition in CSS auf die Mitte ein" ></p>
 </div>

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;
}

Wie folgt rendern:

Verwandte Empfehlungen: CSS-Tutorial

Das obige ist der detaillierte Inhalt vonSo stellen Sie die Bildposition in CSS auf die Mitte ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!