0

我正在尝试在 div 标签内插入一个 div 标签，其中孩子居中并位于底部。（我尝试了 Stack Overflow 的几种解决方案，但均未成功）。使用以下 css 和 html 示例，我遇到了问题

    body{
    margin:0;
    font-family:Georgia,Times,serif !important;
    font-size:12pt;
    background:white;
}

    #header{
        height: 60px;
        width: 100%;
        border: 1px solid black;
    }
    #navWrap{
        background:white;
        bottom: 0;
        font-size: 12pt;
        height: 40px;
        border: 1px solid black;
        margin: 0px auto;
        width: 960px;
    }


    #contentWrapper{
        width:960px;
        padding: 0;
        margin:15px auto 10px auto;
    }

    #content{
        padding: 20px 10px 10px 10px;
        height:100%;
        background:#fff;
        border: 1px solid black;
    }

    #footer {
        width:100%;
        height:260px;
        margin:0 auto;
        padding: 20px 10px 10px 10px;
        border: 1px solid black;
        bottom:0;
    }
    #copyright{
        width:100%;
        height:60px;
        bottom:0;
        margin: 0 auto;
        border: 1px solid black;
    }
<body>
    <div id="header">
        <div id="navWrap">
            This is navigation box.
        </div>
    </div>
    <div id="contentWrapper">
        <div id="content">
            This is a container
        </div>
    </div>
    <div id="footer">
        This is a footer.
    </div>
    <div id="copyright">
        This is a copyright.
    </div>
</body>

我想要底部标题位置内的导航（navWrap）。我怎样才能做到这一点？

4

2 回答 2

0

首先，你需要定位你的#header亲戚，然后定位你的#navWrap绝对。

然后，因为您绝对定位了您的#navWrap元素，所以您将其脱离上下文 - 它的边距将无法自动定位。要解决此问题，请通过声明将整个<div>包含 div 的一半移动left: 50%;，然后通过声明将其拉回其自身宽度的一半margin-left: -480px;。

试试这个 CSS：

body{
    margin:0;
    font-family:Georgia,Times,serif !important;
    font-size:12pt;
    background:white;
}
#header{
    height: 60px;
    width: 100%;
    border: 1px solid black;
    position: relative;
}
#navWrap{
    position: absolute;
    left: 50%;
    margin-left: -480px;
    background:white;
    bottom: 0;
    font-size: 12pt;
    height: 40px;
    border: 1px solid black;
    width: 960px;
}


#contentWrapper{
    width:960px;
    padding: 0;
    margin:15px auto 10px auto;
}

#content{
    padding: 20px 10px 10px 10px;
    height:100%;
    background:#fff;
    border: 1px solid black;
}

#footer {
    width:100%;
    height:260px;
    margin:0 auto;
    padding: 20px 10px 10px 10px;
    border: 1px solid black;
    bottom:0;
}
#copyright{
    width:100%;
    height:60px;
    bottom:0;
    margin: 0 auto;
    border: 1px solid black;
}

请参阅http://jsfiddle.net/kCwQP/。

于 2013-06-16T12:38:56.627 回答
0

将此添加到标题

position:relative

然后这个到 navWrap

position:absolute;
left:50%;
margin-left:-480px; /* centering because your navWrap is 960px in width */

http://jsfiddle.net/fYxAQ/

于 2013-06-16T12:42:45.553 回答