Artikeleinführung von Wulin.com (www.vevb.com): So zentrieren Sie die Bilder vertikal.
Die Breite und Höhe des Bildes sind unbekannt und es gibt keine feste Größe. Unter dieser Prämisse ist es ziemlich problematisch, das Bild vertikal in einem Behälter mit fester Breite und Höhe zentriert zu machen. Da jüngste Projekte diese Lösung verwenden können, habe ich einige häufig verwendete Methoden gesammelt und aussortiert.
Die folgende Abbildung ist ein ideales Rendering. Die Breite und Höhe des äußeren Behälters sind festgelegt, und die Breite und Höhe des Bildes in der Mitte sind unbekannt, aber das Bild muss immer vertikal zentriert sein, relativ zum externen Behälter.
Der in Wirklichkeit implementierte Effekt ist jedoch nicht perfekt. Da das Parsen jedes Browsers unterschiedlich ist, hat jeder Browser eine Abweichung von 1px-3px.
Methode 1 (xhtml 1.0 transitional):
Mit dieser Methode wird der Anzeigemodus des externen Containers auf die Anzeige festgelegt: Tabelle, ein Span-Tag außerhalb des IMG-Tags nisten und den Anzeigemodus der Spannweite für die Anzeige einstellen: Tabellenzell, damit vertikaler Ausrichtung wie Tabellenelemente leicht ausgerichtet werden kann. Dies ist natürlich nur in Standard -Browsern, IE6/IE7 muss auch die Positionierung verwenden.
HTML -Struktur Teil:
<div id = box>
<span> <img Src = Bilder/Demo.jpg Alt => </span>
</div>
CSS -Stil Teil:
<style type = text/css>
#Kasten{
Breite: 500px; Höhe: 400px;
Anzeige: Tabelle;
Text-Align: Mitte;
Rand: 1PX Solid #D3D3D3; Hintergrund: #fff;
}
#Box span {
Anzeige: Tabellenzelle;
vertikaler Align: Mitte;
}
#box img {
Grenze: 1PX Solid #CCC;
}
</style>
<!-[wenn lte dh 7]>
<style type = text/css>
#Kasten{
Position: Relativ;
Überlauf: versteckt;
}
#Box span {
Position: absolut;
Links: 50%; oben: 50%;
}
#box img {
Position: Relativ;
Links: -50%; Top: -50%;
}
</style>
<! [endif]->
Methode 2 (xhtml 1.0 transitional):
Die Prinzipien und Strukturen der Implementierung von Methode 2 und Methode 1 sind ähnlich und die Strukturen sind gleich. Methode 1 verwendet bedingte Anmerkungen und Methode 2 verwendet CSS -Hack.
CSS -Stil Teil:
<style type = text/css>
#Kasten{
Breite: 500px; Höhe: 400px;
Überlauf: versteckt;
Position: Relativ;
Anzeige: Tabellenzelle;
Text-Align: Mitte;
vertikaler Align: Mitte;
Rand: 1PX Solid #D3D3D3; Hintergrund: #fff;
}
#Box span {
Position: statisch;
*Position: absolut; /*Hack für IE6/7*/
Top: 50%; /*Hack für IE6/7*/
}
#box img {
Position: statisch;
*Position: Relativ; /*Hack für IE6/7*/
Top: -50%; Links: -50%; /* Hack für IE6/7*/
Grenze: 1PX Solid #CCC;
}
</style>
Diese Methode hat einen Nachteil. In einem Standardbrowser ist das Anzeigemodus des externen Containers #Box angezeigt: Tabellenzell, das Margenattribut kann nicht für #Box verwendet werden, und das Einstellen von Grenzen in IE8 ist ebenfalls ungültig.
Methode 3 (xhtml 1.0 streng):
Standard-Browser setzen weiterhin den Anzeigemodus des externen Containers #Box auf die Anzeige: Tabellenzell. IE6/IE7 verwendet die Methode, um ein Paar leere Tags vor dem IMG -Tag einzuführen.
HTML -Struktur Teil:
<div id = box> <i> </i> <img src = bilder/deMo.jpg alt => </div>
CSS -Stil Teil:
<style type = text/css>
#Kasten{
Breite: 500px; Höhe: 400px;
Anzeige: Tabellenzelle;
Text-Align: Mitte;
vertikaler Align: Mitte;
Rand: 1PX Solid #D3D3D3; Hintergrund: #fff;
}
#box img {
Grenze: 1PX Solid #CCC;
}
</style>
<!-[wenn dh]>
<style type = text/css>
#box i {
Anzeige: Inline-Block;
Höhe: 100%;
vertikaler Align: Mitte
}
#box img {
vertikaler Align: Mitte
}
</style>
<! [endif]->
Methode 3 gilt auch für XHTML 1.0 Transitional. Die oben genannten Methoden werden von der Webunterricht -Website gesammelt. Derzeit sind nur diese drei Methoden mit sehr zufrieden mit und die Kompatibilität ist gut und die Einschränkungen sind relativ gering. Ich habe auch einige Methoden nacheinander getestet, aber die Ergebnisse sind nicht ideal und es gibt sehr unterschiedliche Unterschiede zwischen verschiedenen Browsern. Darüber hinaus hat situ zhengmei hier auch einige Methoden gesammelt.
Denken: Viele Methoden beruhen darauf, den Anzeigemodus des externen Containers auf eine Tabelle festzulegen, um die vertikale Zentrierung zu erreichen, dh die Div, um die Tabelle zu simulieren. Wie gut wäre es, wenn CSS über eine Immobilie verfügt, um diesen Effekt zu erzielen. Wenn Sie eine gute Methode haben, können Sie sie gerne teilen.
Original: