Republier le centrage horizontal et vertical d'images de taille inconnue dans un conteneur de taille connue (2)_Échange d'expérience

Ceci est un exemple de centrage horizontal et vertical d'une image de taille inconnue dans un conteneur de taille connue Titre original : "Centrer une image de taille inconnue dans un conteneur extérieur de taille connue", auteur : Forme Stu Nicholls : http://www.cssplay.co.uk/menu/centered.html , publié le 15 octobre 2006.

Cet article a été traduit et publié par forestgan le 17/10/2006 Plus d'articles.

Cet exemple de centrage horizontal et vertical peut fonctionner normalement dans IE5.x, IE6, IE7, Firefox, Opera, Mozilla, Netscape, et deux ensembles de styles simples sont écrits pour IE et non-IE.

IE utilise des blocs en ligne, les non-IE utilisent des cellules de tableau et un alignement vertical.

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>

L'exemple de l'auteur est unique. Je l'ai étendu pour inclure 6 images sur une seule page, qui peuvent être utilisées dans des albums photo et des présentations de produits Adresse de démonstration.