So zentrieren Sie ein Bild unbekannter Höhe vertikal

In diesem Artikel wird hauptsächlich die detaillierte Methode zum Einstellen der vertikalen Zentrierung für Bilder unbekannter Höhe vorgestellt. Achten Sie beim Üben besonders auf die Anzeigesituation im IE-Browser.

Standardbrowser oder Set Der Anzeigemodus des externen Containers #box to display:table-cell verwendet die Methode, ein Paar leerer Tags vor dem img-Tag einzufügen

, aber eigentlich in Der erzielte Effekt ist nicht perfekt. Da die Analyse jedes Browsers unterschiedlich ist, gibt es in jedem Browser eine Abweichung von 1 bis 3 Pixel.
Methode 1:

Diese Methode besteht darin, den Anzeigemodus des externen Containers auf display:table festzulegen, ein Span-Tag außerhalb des img-Tags zu verschachteln und den Span-Anzeigemodus festzulegen zu display:table-cell, sodass Sie die vertikale Ausrichtung problemlos zum Ausrichten ähnlicher Tabellenelemente verwenden können. Dies ist natürlich nur unter Standardbrowsern möglich, IE6/IE7 müssen auch die Positionierung verwenden.
HTML-Code

<p id="box">
<span><img src="images/demo.jpg" alt="" /></span>
</p>

CSS-Code

<style type="text/css">   
#box{   
    width:500px;height:400px;   
    display:table;   
    text-align:center;   
    border:1px solid #d3d3d3;background:#fff;   
}   
#box span{   
    display:table-cell;   
    vertical-align:middle;   
}   
#box img{   
    border:1px solid #ccc;   
}   
</style>   
<!--[if lte IE 7]>   
<style type="text/css">   
#box{   
    position:relative;   
    overflow:hidden;   
}   
#box span{   
    position:absolute;   
    left:50%;top:50%;   
}   
#box img{   
    position:relative;   
    left:-50%;top:-50%;   
}   
</style>   
<![endif]-->

Methode zwei:

Implementierung von Methode zwei und Methode eins Die Die Prinzipien sind ähnlich und die Struktur ist dieselbe. Methode eins verwendet bedingte Kommentare und Methode zwei verwendet CSS-Hack.
CSS-Code

#box{   
    width:500px;height:400px;   
    overflow:hidden;   
    position:relative;   
    display:table-cell;   
    text-align:center;   
    vertical-align:middle;   
    border:1px solid #d3d3d3;background:#fff;   
}   
#box span{   
    position:static;   
    *position:absolute; /*针对IE6/7的Hack*/
    top:50%; /*针对IE6/7的Hack*/
}   
#box img {   
    position:static;   
    *position:relative; /*针对IE6/7的Hack*/
    top:-50%;left:-50%; /*针对IE6/7的Hack*/
    border:1px solid #ccc;   
}

Diese Methode hat einen Nachteil: Da der Anzeigemodus des externen Containers #box display:table-cell ist, kann #box das Randattribut nicht verwenden, und in IE8 Auch das Festlegen des Rahmens unten hat keine Auswirkung.
Methode 3:

Standardbrowser setzen den Anzeigemodus des externen Containers #box immer noch auf display:table-cell, und IE6/IE7 verwendet das img-Tag The Die Methode besteht darin, vorne ein Paar leerer Tags einzufügen.

HTML-Code

<p id="box">
    <i></i><img src="images/demo.jpg" alt="" />
</p>

CSS-Code

<style type="text/css">   
#box{   
width:500px;height:400px;   
display:table-cell;   
text-align:center;   
vertical-align:middle;   
border:1px solid #d3d3d3;background:#fff;   
}   
#box img{   
border:1px solid #ccc;   
}   
</style>   
<!--[if IE]>   
<style type="text/css">   
#box i {   
    display:inline-block;   
    height:100%;   
    vertical-align:middle
    }   
#box img {   
    vertical-align:middle
    }   
</style>   
<![endif]-->

Methode 4:

Ein p-Tag außerhalb des img-Tags einschließen, Standardbrowser verwenden das Pseudoklassenattribut: before des p-Tags, um es zu implementieren, und IE6/IE7 verwendet CSS-Ausdrücke, um Kompatibilität zu erreichen.
HTML-Code

<p id="box">
    <p><img src="images/demo.jpg" alt="" /></p>
</p>

CSS-Code

#box{   
    width:500px;height:400px;   
    text-align:center;   
    border:1px solid #d3d3d3;background:#fff;   
}   
#box p{   
    width:500px;height:400px;   
    line-height:400px; /* 行高等于高度 */
}   
/* 兼容标准浏览器 */
#box p:before{   
    content:"."; /* <a href="http://casinogreece.gr/">????????????</a> 具体的值与垂直居中无关，尽可能的节省字符 */
    margin-left:-5px; font-size:10px; /* 修复居中的小BUG */
    visibility:hidden; /*设置成隐藏元素*/
}   
#box p img{   
    *margin-top:expression((400 - this.height )/2); /* CSS表达式用来兼容IE6/IE7 */
    vertical-align:middle;   
    border:1px solid #ccc;   
}

Verwendung: vor Diese Methode ist für Standardbrowser leistungsfähiger und hat keine Nebenwirkungen, aber für IE6/IE7, falls vorhanden Bei hohen Leistungsanforderungen sollte die CSS-Ausdrucksmethode mit Vorsicht verwendet werden.
Methode 5:

Stellen Sie die Schriftgröße des äußeren Containers des Bildes auf das 0,873-fache der Höhe ein, um eine Zentrierung zu erreichen Browser verwenden immer noch die obige Methode, um Kompatibilität zu erreichen, und die Struktur ist eleganter.
HTML-Code

<p id="box">
    <img src="images/demo.jpg" alt="" />
</p>

CSS-Code

#box{   
    width:500px;height:400px;   
    text-align:center;   
    border:1px solid #d3d3d3;background:#fff;   
    /* 兼容标准浏览器 */
    display: table-cell;   
 vertical-align:middle;   
    /* 兼容IE6/IE7 */
    *display:block;   
    *font-size:349px; /* 字体大小约为容器高度的0.873倍 400*0.873 = 349 */
    *font-family:Arial; /* 防止非utf-8引起的hack失效问题，如gbk编码 */
}   
#box img{   
    vertical-align:middle;   
}

Die Methode zum Festlegen der Schriftgröße fühlt sich seltsam an und ich habe keine vernünftige Erklärung gesehen, ich weiß nur, dass das Bild Die Eigenschaften anderer Elemente unterscheiden sich etwas, aber für IE6/IE7 ist diese Methode recht leistungsfähig.
Denken: Viele Methoden basieren auf der Einstellung des Anzeigemodus des externen Containers auf Tabelle, um eine vertikale Zentrierung zu erreichen, d. h. p, um eine Tabelle zu simulieren. Es wäre großartig, wenn CSS ein Attribut hätte, um diesen Effekt zu erzielen.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So verwenden Sie negative Randwerte in CSS, um die Mittelposition anzupassen

Anleitung Verwenden Sie das position:fixed-Attribut. Zentrieren Sie das DIV

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie ein Bild unbekannter Höhe vertikal. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!