Question

我正在尝试在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）位于底部的标题位置。我怎么能做到这一点？

Answer 1

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

然后，因为您绝对定位了#navWrap元素，所以您将其置于上下文之外 - 其边距将无法自动定位。要解决此问题，请通过声明<div>将整个left: 50%;移到包含div的中间位置，然后通过声明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/。

Answer 2

将其添加到标题

position:relative

然后再到navWrap

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

http://jsfiddle.net/fYxAQ/

（css）div内部div，居中和底部

2 个答案: