1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5 <title> Stu Nicholls | CSSplay | Centering an image using CSS </title>
6
7 <style type="text/css">
8 /* for non-IE browsers */
9 p.holder {width:748px; height:200px; background:#fff; border:1px solid #ddd; text-align:center; display:table-cell; vertical-align:middle;}
10 p.holder img {margin:0 auto; border:1px solid #bbb;}
11 </style>
12 <!--[if lte IE 7]>
13 <style type="text/css">
14 /* vertical align for IE6 and IE7*/
15 p.holder {text-align:left;}
16 #edge {width:0; height:100%; display:inline-block; vertical-align:middle;}
17 #container {text-align:center; width:100%; display:inline-block; vertical-align:middle;}
18 </style>
19 <![endif]-->
20 </head>
21
22 <body>
23 <p class="holder">
24 <span id="edge"></span>
25 <span id="container"><img src="http://www.cssplay.co.uk/menu/graphics/homework.jpg" alt="Homework" title="Homework" /></span>
26 </p>
27 </body>
28 </html>
引用: http://www.cssplay.co.uk/menu/centered.html
