网页中万能垂直居中方法其实是这样的
来源:广州中睿信息技术有限公司官网
发布时间:2012/10/21 23:25:16 编辑:admin 阅读 351
查了很多很多,想法都是好的,想只用CSS实现兼容各种浏览器的垂直居中,但是我看了效果都不是很理想。后来猛一拍脑门,要想在所有浏览器里都实现垂直居中,简单几句JS(要借助JQuery)就可以了。原理就

查了很多很多,想法都是好的,想只用CSS实现兼容各种浏览器的垂直居中,但是我看了效果都不是很理想。

后来猛一拍脑门,要想在所有浏览器里都实现垂直居中,简单几句JS(要借助JQuery)就可以了。

原理就是根据id取得myheight和myfatherheight,然后再设置要被居中的元素的top值,OK,搞定。

    <script src="scripts/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(
function () {
            FixIt_Vertically(
"div1");
        });
        
function FixIt_Vertically(id) {
            
//var myobj = document.getElementById(id);
            var myheight = $("#" + id).outerHeight();
            
var myfatherheight = $("#" + id).parent().height();
            
var mytop = (myfatherheight - myheight) / 2;
            $(
"#" + id).css("position""relative").css("top", mytop + "px");
        }
    
</script>

IE6,IE8,IE9,chrome, safari, firefox, opera测试全部通过!

欢迎拍砖。

联系我们CONTACT 扫一扫
愿景:成为最专业的软件研发服务领航者
中睿信息技术有限公司 广州•深圳 Tel:020-38931912 务实 Pragmatic
广州:广州市天河区翰景路1号金星大厦18层中睿信息 Fax:020-38931912 专业 Professional
深圳:深圳市福田区车公庙有色金属大厦509~510 Tel:0755-25855012 诚信 Integrity
所有权声明:PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。
版权所有:广州中睿信息技术有限公司 粤ICP备13082838号-2