1

无论如何，我似乎都无法将#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

4

3 回答 3

6

The problem is that you can't apply auto margins to a fixed element. To allow for varying menu widths, I'd do this:

#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;
}
于 2013-01-07T17:08:02.760 回答
0

事情很简单，因为您使用的是固定宽度的菜单。将以下 CSS 添加到您的#testmenu:

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

您可以在此处查看工作演示 > http://jsfiddle.net/mXTmF/1/

于 2013-01-07T16:46:41.593 回答
0 
<!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;
}
于 2013-01-07T16:47:08.670 回答