| 标题 | css中不确定高度垂直居中2种方法 |
| 内容 | 例子1 不确定高度垂直居中 代码如下: /* center < */ .vetically { vertical-align: middle; display: table-cell; *position: relative; } .vetically_C { display: block; margin: 0 auto; text-align: center; *position: absolute; *top: 50%; *left: 50%; *margin-top: expression(-(this.height ) / 2); *margin-left: expression(-(this.width ) / 2); } /* center > */ 例子2 标准浏览器的情况还是和上面一样，不同的是针对IE6/IE7利用在img标签的前面插入一对空标签的办法。 代码如下: <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>方法2 - 未知高度的图片垂直居中</title> <style type="text/css"> body { height:100%; } #box{ width:500px;height:400px; display:table-cell; text-align:center; vertical-align:middle; border:1px solid #d3d3d3;background:#fff; } #box img{ border:1px solid #ccc; } </style> <!--[if IE]> <style type="text/css">? #box i { display:inline-block; height:100%; vertical-align:middle } #box img { vertical-align:middle } </style> <![endif]--> </head> <body> <div id="box"> <i></i><img src="images/demo_zl.png" /> </div> </body> </html> |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。