Neuveröffentlichung der horizontalen und vertikalen Zentrierung von Bildern unbekannter Größe in einem Container bekannter Größe (2)_Erfahrungsaustausch

Dies ist ein Beispiel für die horizontale und vertikale Zentrierung eines Bildes unbekannter Größe in einem Behälter bekannter Größe. Originaltitel: „Zentrierung eines Bildes unbekannter Größe in einem äußeren Behälter bekannter Größe“, Autor: Stu Nicholls Form: http://www.cssplay.co.uk/menu/centered.html , veröffentlicht am 15. Oktober 2006.

Dieser Artikel wurde von forestgan am 17.10.2006 übersetzt und veröffentlicht. Weitere Artikel.

Dieses horizontale und vertikale Zentrierungsbeispiel kann normal in IE5.x, IE6, IE7, Firefox, Opera, Mozilla, Netscape funktionieren, und zwei Sätze einfacher Stile sind für IE und Nicht-IE geschrieben.

IE verwendet Inline-Blöcke, Nicht-IE verwendet Tabellenzellen und vertikale Ausrichtung.

CSS

/* for non-IE browsers */
div.holder {width:750px; height:300px; background:#f8f8f8; 
border:1px solid #777; text-align:center; display:table-cell; vertical-align:middle;}
}<br><!--[if IE]>
<style type="text/css">
/* vertical align for IE */
#edge {width:0; height:100%; display:inline-block; vertical-align:middle;} 
#container {text-align:center; width:100%; display:inline-block; vertical-align:middle;}
</style>
<![endif]-->

xhtml

<div class="holder"><br><span id="edge"></span> <br><span id="container"><img src="graphics/homework.jpg" alt="" /></span><br></div><br>

Das Beispiel des Autors ist ein einzelnes, das ich um 6 Bilder auf einer Seite erweitert habe, die in Fotoalben und Produktanzeigen verwendet werden können.