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>

以下是我所追求的内容的简单说明：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;
}

Answer 2

事情非常简单，因为您使用固定宽度的菜单。在#testmenu上添加以下CSS：

position: relative;
left: 50%;
margin-left: -480px;

你可以在这里看到一个有效的演示＆gt; http://jsfiddle.net/mXTmF/1/

Answer 3

<!DOCTYPE html>
<html>
<body>
<div style='border:1px solid; width:960px; height:200px; position:absolute; left:50%; bottom: 100px; margin-left:-480px;'>hallo</div>
</body>
</html>

在Css

#testmenu {
width: 960px;
position: absolute;
left: 50%;
bottom: 100px;
margin-left:-480px;
}

中心DIV具有固定（底部）位置

3 个答案: