Question

我正在网站上工作，我想在之前制作一个正在建设中的屏幕。在这个屏幕上有两个div（#logo和#contact）。我想在屏幕加载之前将这些div定位到屏幕中间。有HTML：

     $(document).ready(function(){
            $(window).resize(function(){
                $("#logo").css({
                    position:'absolute',
                    left: ($(window).innerWidth() - $("#logo").outerWidth())/2,
                    top: ($(window).innerHeight() - $("#logo").outerHeight())/2
                });
                $("#contact").css({
                    position:'absolute',
                    left: ($(window).innerWidth() - $("#contact").outerWidth())/2,
                    top: ($(window).innerHeight() - $("#contact").outerHeight())/2
                }); 
            });
            $(window).resize();
        });
    </script>
    </head>
<body>
    <div id="logo">
        <script>
            $("#logo").load(function(){
                $("#logo").css({
                    position:'absolute',
                    left: ($(window).innerWidth() - $("#logo").outerWidth())/2,
                    top: ($(window).innerHeight() - $("#logo").outerHeight())/2
                });
            });
        </script>
        <a href="#">
            <img id="logoimg"  src="img/logo.png" title="UNDER CONSTRUCTION" alt="site logo"/>
        </a>
    </div>
    <div id="contact">
        <p>Address: blabla<br>blabla</p>
        <p>Phone: 00000000000</p>
        <p>E-mail: <a href="mailto:contact@info.com">contact@info.com</a></p>
    </div>
    <script>
        $("#logo").mouseenter(function(){
            $("#logo").fadeTo("fast", 1);
        })
        $("#logo").mouseleave(function(){
            $("#logo").fadeTo("fast",0.33);
        })
        $("#logo").click(function (){
            $("#logo").fadeOut("fast");
            $("#contact").fadeIn("slow");
        })
        $("#contact").click(function(){
            $("#contact").fadeOut(300);
            $("#logo").fadeIn(500);
        })
    </script>
</body>
</html>

一切都很好，但徽标div不是中间的，只是水平的，另一个很好。为什么？你推荐什么？

哦，还有.css

html{
background:url(img/sixtkep1.jpg) no-repeat bottom center;
background-size:cover;
overflow:hidden;
min-height:100%;
font-family:'Amatic SC' cursive;
}
body{
height:100%;
}
#logo{
position:absolute;
width:20%;
border:1px dotted;
border-color:#FFF;
padding:0 0 0 0;
}
#logo img{
width:100%;
margin:0 0 0 0;
border:0 0 0 0;
}
#contact{
padding:20px;
display:none;
width:20%;
overflow:inherit;
position:absolute;
text-align:center;

谢谢！

Answer 1

你应该尝试使用$(window).load(function() {代替$(document).ready(function(){

Answer 2

对于left（和最初的top声明），您可以使用CSS轻松完成：

#logo,#contact {
    position:absolute;
    top:50%;
    left:40%;
    width:20%;
    ...
}

left被分配给剩余的80％除以2. top已分配给50%，因此您只能将marginTop应用于否定以抵消它：

$("#logo,#contact").css({
    marginTop:(-1*($(this).height()/2))
});

注意我将声明组合到一个选择器中（因为CSS是相同的），并使用一半的高度来形成边距。这将使它从top:50% CSS的高度增加一半，将其垂直居中。

另一个选项是为#logo和#contact设置固定高度，这样您就可以在没有JS解决方案的情况下在CSS中声明负边距：

#logo,#contact {
    position:absolute;
    top:50%;
    left:40%;
    width:20%;
    height:400px;
    margin-top:-200px;
    ...
}

这是首选，但只有在应用固定高度时才有效。我在这里使用了px，但您可以轻松使用%。

Answer 3

我有解决方案！我没有在css中设置顶部和左侧参数。就在jQuery中。

#logo{
position:absolute;
width:20%;
margin: 0 0 0 0;
padding:0 0 0 0;
}
#logo img{
width:100%;
margin:0 0 0 0;
border:0 0 0 0;
}
#contact{
display:none;
width:30%;
min-width:320px;
max-width:360px;
overflow:inherit;
position:absolute;

有两个div，具有相对大小。没有像素!!!

并且有脚本：

$(document).ready(function(){
        $(window).load(function(){
            $(window).resize(function(){
                $("#logo").css({
                    opacity:0.33,
                    top:($(window).innerHeight()*0.5)-($("#logoimg").height()/2),
                    left:($(window).innerWidth()*0.5)-($("#logoimg").width()/2),
                });
                $("#contact").css({
                    top:($(window).innerHeight()*0.5)-($("#contact").height()/2),
                    left:($(window).innerWidth()*0.5)-($("#contact").width()/2),
                }); 
            });
            $(window).resize();
        });
    });

它适用于每个窗口大小和每个浏览器。每次相对的div都在中间！：）

jQuery在加载之前绝对定位DIV

3 个答案: