例子1GMEHTML5中文学习网 - HTML5先行者学习网
不确定高度垂直居中GMEHTML5中文学习网 - HTML5先行者学习网
代码如下 | |
/* center < */GMEHTML5中文学习网 - HTML5先行者学习网 .vetically {GMEHTML5中文学习网 - HTML5先行者学习网 vertical-align: middle;GMEHTML5中文学习网 - HTML5先行者学习网 display: table-cell;GMEHTML5中文学习网 - HTML5先行者学习网 *position: relative;GMEHTML5中文学习网 - HTML5先行者学习网 }GMEHTML5中文学习网 - HTML5先行者学习网 .vetically_C {GMEHTML5中文学习网 - HTML5先行者学习网 display: block;GMEHTML5中文学习网 - HTML5先行者学习网 margin: 0 auto;GMEHTML5中文学习网 - HTML5先行者学习网 text-align: center;GMEHTML5中文学习网 - HTML5先行者学习网 *position: absolute;GMEHTML5中文学习网 - HTML5先行者学习网 *top: 50%;GMEHTML5中文学习网 - HTML5先行者学习网 *left: 50%;GMEHTML5中文学习网 - HTML5先行者学习网 *margin-top: expression(-(this.height ) / 2);GMEHTML5中文学习网 - HTML5先行者学习网 *margin-left: expression(-(this.width ) / 2);GMEHTML5中文学习网 - HTML5先行者学习网 }GMEHTML5中文学习网 - HTML5先行者学习网 /* center > */GMEHTML5中文学习网 - HTML5先行者学习网 |
例子2GMEHTML5中文学习网 - HTML5先行者学习网
标准浏览器的情况还是和上面一样,不同的是针对IE6/IE7利用在img标签的前面插入一对空标签的办法。GMEHTML5中文学习网 - HTML5先行者学习网
代码如下 | |
<html xmlns="http://www.w3.org/1999/xhtml"> GMEHTML5中文学习网 - HTML5先行者学习网 <head> GMEHTML5中文学习网 - HTML5先行者学习网 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> GMEHTML5中文学习网 - HTML5先行者学习网 <title>方法2 - 未知高度的图片垂直居中</title> GMEHTML5中文学习网 - HTML5先行者学习网 <style type="text/css"> GMEHTML5中文学习网 - HTML5先行者学习网 body { GMEHTML5中文学习网 - HTML5先行者学习网 height:100%; GMEHTML5中文学习网 - HTML5先行者学习网 } GMEHTML5中文学习网 - HTML5先行者学习网 #box{ GMEHTML5中文学习网 - HTML5先行者学习网 width:500px;height:400px; GMEHTML5中文学习网 - HTML5先行者学习网 display:table-cell; GMEHTML5中文学习网 - HTML5先行者学习网 text-align:center; GMEHTML5中文学习网 - HTML5先行者学习网 vertical-align:middle; GMEHTML5中文学习网 - HTML5先行者学习网 border:1px solid #d3d3d3;background:#fff; GMEHTML5中文学习网 - HTML5先行者学习网 } GMEHTML5中文学习网 - HTML5先行者学习网 #box img{ GMEHTML5中文学习网 - HTML5先行者学习网 border:1px solid #ccc; GMEHTML5中文学习网 - HTML5先行者学习网 } GMEHTML5中文学习网 - HTML5先行者学习网 </style> GMEHTML5中文学习网 - HTML5先行者学习网 <!--[if IE]> GMEHTML5中文学习网 - HTML5先行者学习网 <style type="text/css">? GMEHTML5中文学习网 - HTML5先行者学习网 #box i { GMEHTML5中文学习网 - HTML5先行者学习网 display:inline-block; GMEHTML5中文学习网 - HTML5先行者学习网 height:100%; GMEHTML5中文学习网 - HTML5先行者学习网 vertical-align:middle GMEHTML5中文学习网 - HTML5先行者学习网 } GMEHTML5中文学习网 - HTML5先行者学习网 #box img { GMEHTML5中文学习网 - HTML5先行者学习网 vertical-align:middle GMEHTML5中文学习网 - HTML5先行者学习网 } GMEHTML5中文学习网 - HTML5先行者学习网 </style> GMEHTML5中文学习网 - HTML5先行者学习网 <![endif]--> GMEHTML5中文学习网 - HTML5先行者学习网 </head> GMEHTML5中文学习网 - HTML5先行者学习网 <body> GMEHTML5中文学习网 - HTML5先行者学习网 <div id="box"> GMEHTML5中文学习网 - HTML5先行者学习网 <i></i><img src="images/demo_zl.png" alt="" /> GMEHTML5中文学习网 - HTML5先行者学习网 </div> GMEHTML5中文学习网 - HTML5先行者学习网 </body> GMEHTML5中文学习网 - HTML5先行者学习网 </html>GMEHTML5中文学习网 - HTML5先行者学习网 |