中心DIV具有固定(底部)位置

Question

无论如何,我似乎无法将#testmenu置于中心...我已经在CSS中尝试了几十种组合但没有运气.请花一点时间看看,并保护我的头发不被完全拉出.

#abc {
    position:absolute; 
  bottom: 0;
    width:100%;
    left:0;
    text-align:center; /* IE 5.x centering */
}

#testmenu {
    line-height:2em;
    width:960px;
    color:#FFF;
    background:#00F;
  background:#C00;
    margin:0 auto;
}

<div id="abc">
    <div id="testmenu">
        This should remain 'fixed' bottom center.
    </div>
</div>

这里有一个简单的jsfiddle我正在追求的内容:http://jsfiddle.net/mXTmF以及页面的工作演示:http://ht-webcreations.com/vildiridis/index.php

Answer 1

问题是您无法将自动边距应用于固定元素.为了允许不同的菜单宽度,我会这样做:

#abc {
    bottom: 0;
    height: 30px; /* forces #testmenu to the bottom */
    margin: 0 auto;
    position: fixed;
    width: 100%;
}
#testmenu {
    background: none repeat scroll 0 0 #FF0000;
    bottom: 0;
    font-size: 10px;
    height: 30px;
    overflow: hidden; /* prevents extra space underneath from 33px-high menu items */
    margin: 0 auto;
    max-width: 1000px;
    width: 960px;
}