html - 如何同时从相对定位和绝对定位获取属性

Question

我有一个页脚，我想使用 bottom:0px 附加到页面底部。但是，我还想通过使用 margin-left:auto; 和 margin-right:auto; 将其居中。实际上，这会将页脚固定在页面底部，同时保持其垂直居中。

不幸的是，这些不能一起使用，因为 bottom:0px 需要 position:relative 而 margin-left:auto 和 margin -right:auto 需要 position:absolute。

如何在不创建容器的情况下将这两个属性放到同一个 div 中？

如果不可能，获得这两个属性的简洁方法是什么？

另外:我不想有一个固定的职位。

页脚.css:

.footer
{
    /*background-color:blue;*/


    min-height:10px;
    width:940px;


    margin-top:5px;
    margin-left:auto; /* WILL ONLY WORK IF POSITION IS RELATIVE */
    margin-right:auto;
    padding:5px;

    display:block;

    border-top: 3px solid #CCCCCC;

    text-align: center;
    font-family:arial;
    color:gray;

    position: relative;

    bottom:0px; /* WILL ONLY WORK IF POSITION IS ABSOLUTE */
}

谢谢。

Answer 1

由于您的页脚有固定宽度，因此您可以使用此解决方案:

float:left;
min-height:10px;
width:940px;
position: absolute;
left:50%;
bottom:0px; 
margin-left:-470px;

请看这个:http://jsfiddle.net/vY9UJ/