Reprint a picture of unknown size in the horizontal and vertical center of a known size container (ii) _ Experience Exchange

This is an example of the horizontal and vertical centering of an unknown size picture in a known sized container, in the original title: "Centering an image of unknown size in a outer container of known size", Author: Stu Nic Holls form:http://www.cssplay.co.uk/menu/centered.html , Release date: 15th October 2006.

This article was published by Forestgan in 2006-10-17 for more articles.

This horizontal and vertically centered example works well in ie5.x, IE6, IE7, Firefox, Opera, Mozilla, Netscape, and wrote two sets of simple styles for IE and non ie respectively.

IE uses inline-blocks, not IE using 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}
}
<!--[if ie]>
<style type= "Text/css" >/
* vertical align for IE/
#edge {width:0; Display:inline-block; Vertical-align:middle;} 
#container {text-align:center; width:100%; display:inline-block; vertical-align:middle;}
</style>
<![ Endif]-->

Xhtml

<div class= "Holder" >

<span id= "container" ></span>
</div>

The author's example is single, I expanded the next, a page 6 pictures, can be applied to such places as album and product display, demo address.