Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

烟雨青岚
Freigeben: 2020-07-09 17:20:20
nach vorne
3617 Leute haben es durchsucht

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>
Nach dem Login kopieren

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;
 }效果如下:
Nach dem Login kopieren

2. Verwenden Sie die Hintergrundmethode:

Der HTML-Code lautet wie folgt:

 <p class="img_wrap"></p>
Nach dem Login kopieren

Der CSS-Code lautet wie folgt:

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

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>
Nach dem Login kopieren

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;
 }
Nach dem Login kopieren

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!

Verwandte Etiketten:
css
Quelle:csdn.net
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage