0

私はウェブサイトに取り組んでおり、以前に作成中の画面を作成したいと考えています。この画面には 2 つの 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;

ありがとう！

4

3 に答える 3

0

私は解決策を持っています！CSS で top と left のパラメータを設定していません。ちょうど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;

相対サイズの 2 つの 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は毎回真ん中にあります! :)

于 2013-06-11T09:34:35.943 に答える
0

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))
});

宣言を 1 つのセレクターに結合し (CSS が同じであるため)、高さの半分を使用して余白を形成していることに注意してください。これにより、CSS からそれ自体の高さの半分が持ち上げられ、top:50%垂直方向の中央に配置されます。

#logoもう 1 つのオプションは、とに固定の高さを設定する#contactことです。これにより、JS ソリューションを使用せずに CSS で負のマージンを宣言するだけです。

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

これは非常に好まれますが、固定の高さを適用する場合にのみ機能します。ここで使用pxしましたが、同じように簡単に使用できます%。

于 2013-06-07T20:45:15.827 に答える