zoukankan      html  css  js  c++  java
  • 网页中万能垂直居中方法其实是这样的

    查了很多很多,想法都是好的,想只用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测试全部通过!

    欢迎拍砖。

  • 相关阅读:
    1088
    1082 read number in chinese
    1079 total sales of supply chain
    1075 pat judge
    1074 reverse list
    1071 speech pattern
    ts 之 多种泛型的处理方式
    玩一下node中的child_process
    玩转 js 位运算
    记录一下尝试的class和function分别作为构造函数方法
  • 原文地址:https://www.cnblogs.com/chenqiang001/p/2313459.html
Copyright © 2011-2022 走看看