兼容ie6、ie7、ff、opera、safari的水平垂直居中

网页特效

网站首页菜单导航日期时间背景图像图层样式鼠标键盘页面窗口色彩表格链接文字表单按钮计数转换游戏娱乐综合实例

您的位置: 网页特效 -> 图层样式 -> 兼容ie6、ie7、ff、opera、safari的水平垂直居中

兼容ie6、ie7、ff、opera、safari的水平垂直居中

作者:admin 发布时间:2010-10-20 5:50:47 发布人: admin

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>兼容ie6、ie7、ff、opera、safari的水平垂直居中</title>
<style media="screen" type="text/css">
.wrapper{ width:700px; height:400px; background:#ccc; border:1px #000 solid;}
.holder{width:500px; height:200px; display:table; position:relative; margin:12px auto; border:1px solid #596480; background:#ffc;}
.holder div{*position:absolute; top:50%; left:0; display:table-cell; vertical-align:middle; width:100%;}
.holder p{position: relative; top:-50%; text-align:center; margin:0; padding:0;}
/*
分两套看：
holder的 display:table;
holder div的 display:table-cell; vertical-align:middle;
就可以实现在ff、safari和opera下的垂直居中，但是对ie系列无效；
holder的 position:relative;
holder div的 *position:absolute; top:50%; left:0;
.holder p的 position:relative; top:-50%;
通过控制绝对层的位置实现ie6、ie7下的垂直居中；
holder div中的*position:absolute是只给ie6和ie7看的css hack；
对于水平居中要说的是，如果holder div的width如果未指明100%，在ie7中它是不会自动延伸100%的，也就无法实现水平居中。
*/
</style>
</head>
<body>
<div class="wrapper">
<div class="holder">
<div><p><img src="http://web.archive.org/web/20150428061437im_/http://myjs.jz123.cn/img/719.gif"/></p></div>
</div>
<div style="line-height:40px; background:#006633; font-size:14px; color:#FFFFFF; font-weight:bold; text-align:center;">
Box中的图片垂直并且水平居中，您可以改变holder的height和width进行测试</div>
</div>
</body>
</html>

兼容ie6、ie7、ff、opera、safari的水平垂直居中

将本文收藏到QQ书签与更多好友分享

上一篇：文章：感应鼠标图片透明度变化下一篇：文章：用户访问可以选择网页背景色

网页特效

兼容ie6、ie7、ff、opera、safari的水平垂直居中

本类浏览排行 »

本站推荐文章 »