Reposting the horizontal and vertical centering of images of unknown size in a container of known size (2)_Experience exchange

This is an example of horizontal and vertical centering of an image of unknown size in a container of known size. Original title: "Centering an image of unknown size in an outer container of known size", author: Stu Nicholls form: http://www.cssplay.co.uk/menu/centered.html , published on 15th October 2006.

This article was translated and published by forestgan on 2006-10-17. More articles.

This horizontal and vertical centering example can work normally in IE5.x, IE6, IE7, Firefox, Opera, Mozilla, Netscape, and two sets of simple styles are written for IE and non-IE.

IE uses inline-blocks, non-IE uses table-cell and vertical-align.

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>

The author's example is a single one. I extended it to include 6 pictures on one page, which can be used in photo albums and product displays. Demo address.