以另一个DIV为中心浮动DIV

Question

我试图将div放在另一个div上，但是在中心（宽度）。

编辑：我希望容器div超过顶部div并居中。

当前的CSS：

body {
    background-color: #FFF;
    margin: auto;
}

#top {
    background-color: #F2F2F2;
    border-bottom: 1px solid #CCC;
    height: 150px;
    position: relative;
}

#container {
    background-color: #FFF;
    border: 1px solid #CCC;
    width: 920px;
    height:300px;
    position: absolute;
    top:0;
    right:auto;
}

这是我得到的：

Answer 1

左设置：50％ 和margin-left：-460px（div的宽度的一半）

Answer 2

试试这个。它是未经测试的，但你基本上需要将容器div设置为relative，然后将div设置为绝对值。

body {
        background-color: #FFF;
        margin: auto;
    }

#top {
    background-color: #F2F2F2;
    border-bottom: 1px solid #CCC;
    top: 50%;
    left: 50%;
    position: absolute;
}

#container {
    background-color: #FFF;
    border: 1px solid #CCC;
    width: 920px;
    height:300px;
    position: relative;
    right:auto;
}

Answer 3

我建议将#top的position属性设置为absolute，并使用一点javascript将left属性设置为＃container的左边+＃container的宽度的一半 - #top的宽度的一半。

即包含jQuery（未经测试）后：

$(document).ready(function(){
    var topLeft = $("#container").css("left") + ($("#container").css("width")/2) - ($("#top").css("width")/2);
    $("#top").css("left", topLeft);
});

如果left为零，就像你提供的例子那样，$（“＃container”）。css（“left”）这个词是不必要的。

编辑：你还必须确保适当地设置两个div的z-index属性。