（css）div，位于div内，居中且位于底部

Question

I'm trying to insert a div tag inside a div tag, where the child is centered and positioned at the bottom. 我正在尝试在div标签内插入div标签，该标签将孩子居中并放置在底部。 (I've tried several solutions from Stack Overflow with no success). （我已经尝试过Stack Overflow的几种解决方案，但都没有成功）。 With the following css and html examples, I'm having a problem 在以下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>

I want the navigation (navWrap) inside the header position at the bottom. 我想要底部的标题位置内的导航（navWrap）。 How can I accomplish this? 我该怎么做？

Answer 1

First, you'll need to position your #header relative, then position your #navWrap absolute. 首先，您需要定位#header亲戚，然后定位#navWrap绝对值。

Then, because you're absolutely positioning your #navWrap element, you're taking it out of context – its margin won't be able to be automatically positioned. 然后，由于您要绝对定位#navWrap元素，因此将其移出上下文-它的边距将无法自动定位。 To resolve this, shift the entire <div> halfway across the containing div by declaring left: 50%; 要解决此问题，请声明left: 50%;将整个<div>移至包含div的一半left: 50%; , then bring it back by half of its own width by declaring margin-left: -480px; ，然后通过声明margin-left: -480px;使它返回其自身宽度的margin-left: -480px; . 。

Try this CSS: 试试这个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;
}

See http://jsfiddle.net/kCwQP/ . 参见http://jsfiddle.net/kCwQP/ 。

Answer 2

Add this to the header 将此添加到标题

position:relative

And then this to the navWrap 然后到navWrap

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

http://jsfiddle.net/fYxAQ/ http://jsfiddle.net/fYxAQ/

（css）div，位于div内，居中且位于底部

问题描述

2 个解决方案

解决方案1
0 2013-06-16 12:38:56

解决方案2
0 已采纳 2013-06-16 12:42:45

（css）div，位于div内，居中且位于底部

问题描述

2 个解决方案

解决方案1 0 2013-06-16 12:38:56

解决方案2 0 已采纳 2013-06-16 12:42:45

解决方案1
0 2013-06-16 12:38:56

解决方案2
0 已采纳 2013-06-16 12:42:45