0

divをdiv内で整列させて、完全に中央に配置しようとしていますが、それを機能させることができず、多くのことを試しました。これが今の私のコードです：

HTML

<div class="loginContainer">
  <div class="loginContent">
    This div should be in the middle of the outer div
  </div>
</div>

CSS

div.loginContainer {
    width:100%;
    height:300px;
    position:absolute;
    top:50%;
    margin-top:-150px;

    background-color:#ffffff;
    background: url('bg.jpeg') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    background-size: cover;
}

div.loginContent {
    margin:0 auto;
    height:250px;
    width:300px;
    padding:10px;
    position:relative; 
    top:-50%; 

    background-color:#ffffff;
    border-radius:20px 20px 20px 20px;
        -moz-border-radius:20px 20px 20px 20px;
        -webkit-border-radius:20px 20px 20px 20px;
        -khtml-border-radius:20px 20px 20px 20px;
    box-shadow:7px -5px 10px rgba(230, 230, 250, 0.7);
        -webkit-box-shadow:7px -5px 10px rgba(230, 230, 250, 0.7);
        -moz-box-shadow:7px -5px 10px rgba(230, 230, 250, 0.7);
    box-shadow:5px 5px 30px 0px rgba(202, 225, 255, 1), inset 5px 5px 50px 2px rgba(230, 230, 250, 1);
        -webkit-box-shadow:5px 5px 30px 0px rgba(202, 225, 255, 1), inset 5px 5px 50px 2px rgba(230, 230, 250, 1);
        -moz-box-shadow:5px 5px 30px 0px rgba(202, 225, 255, 1), inset 5px 5px 50px 2px rgba(230, 230, 250, 1);
}

私が得ることができる最も近いものは、それが水平に整列され、ほとんど垂直に配置されていることですが、それでも外側のdivの下端に近いです。

私は何を間違えましたか？

4

2 に答える 2

0

これをCSSに追加してみてください。希望どおりに機能すると思います。

div.loginContent {
    position:absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
于 2013-01-14T10:55:50.987 に答える
0

固定の高さで作業しているように見えますが、div を中央に配置するために正しい余白サイズを簡単に追加してみませんか?

div.loginContent {
    margin:15px auto;
}

http://jsfiddle.net/kSUBe/

または、コンテナーで行ったのと同じことができる場合。top:50%コンテンツ div がある場合、コンテナーの中央から開始されますが、中央に配置する場合は、サイズの半分だけ上に移動する必要があります。

div.loginContent {
    margin:-135px auto 0 auto;
    top:50%;
}

http://jsfiddle.net/kSUBe/1/

于 2013-01-14T10:59:44.130 に答える