• 网页中万能垂直居中方法其实是这样的


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

    欢迎拍砖。

  • 相关阅读:
    HDOJ 4747 Mex
    HDU 1203 I NEED A OFFER!
    HDU 2616 Kill the monster
    HDU 3496 Watch The Movie
    Codeforces 347A A. Difference Row
    Codeforces 347B B. Fixed Points
    Codeforces 372B B. Hungry Sequence
    HDU 1476 Sudoku Killer
    HDU 1987 How many ways
    HDU 2564 词组缩写
  • 原文地址:https://www.cnblogs.com/chenqiang001/p/2313459.html
Copyright © 2020-2023  润新知