CSS页脚栏底部中心问题

问题描述:

嘿所有,我想让我的底栏居中在屏幕上,但我无法这样做。CSS页脚栏底部中心问题

<style type="text/css"> 
body { 
background: #fffff; 
margin: 0; 
padding: 0; 
font: 10px normal Verdana, Arial, Helvetica, sans-serif; 

} 

* {margin: 0; padding: 0; outline: none;} 

#bottomBar { 
position: fixed; 
bottom: 0px; 
left: 0px; 
z-index: 9999; 
background: #e3e2e2; 
border: 1px solid #c3c3c3; 
border-bottom: none; 
width: 500px; 
min-width: 500px; 
margin: 0px auto; 
-moz-opacity:.90; 
filter:alpha(opacity=90); 
opacity:.90; 
} 

*html #bottomBar {margin-top: -1px; position: absolute;  top:expression(eval(document.compatMode &&document.compatMode=='CSS1Compat') ?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));} 
#bottomBar ul {padding: 0; margin: 0;float: left;width: 100%;list-style: none;border-top: 1px solid #fff;} 
#bottomBar ul li{padding: 0; margin: 0;float: left;position: relative;} 
#bottomBar ul li a{padding: 5px;float: left;text-indent: -9999px;height: 16px; width: 16px;text-decoration: none;color: #333;position: relative;} 
html #bottomBar ul li a:hover{ background-color: #fff; } 
a.PDF{background: url(http://www.xxx.com/img/pdficon.png) no-repeat center center; } 

</style> 

<div id="bottomBar"> 
<ul id="mainpanel">  
    <li style="padding-top:5px; font-family:Arial, Helvetica, sans-serif; padding-left: 5px;">First time here? Be sure to check out the "this" button above or download the PDF here -></li> 
    <li><a href="http://www.xxx.com" class="PDF">Download PDF <small>Download PDF</small></a></li> 
</ul> 
</div> 

谢谢!

大卫

好吧,我得到它通过增加这我的CSS:

left:0; 
right:0; 

试试这个:

#bottomBar { 
position: fixed; 
bottom: 0px; 
z-index: 9999; 
background: #e3e2e2; 
border: 1px solid #c3c3c3; 
border-bottom: none; 
width: 500px; 
min-width: 500px; 
-moz-opacity:.90; 
filter:alpha(opacity=90); 
opacity:.90; 
margin-left:auto; 
margin-right:auto; 
left:25%; 
right:25%; 
} 
+0

感谢您的答复,但Diodeus使用这些代码是不是真的在屏幕上居中。当我调整窗口的大小时,它会被切断。 – StealthRT 2010-04-26 21:02:37

我认为你需要改变的唯一的事情是消除left: 0px;线。该行强制div位于其包含元素的最左边的像素处。既然你只是想要它居中,margin: 0 auto;应该为你去除那一行。

+0

感谢您的评论,迈克尔,但拿出左:0px;什么也没做。它仍然在同一个地方:o( – StealthRT 2010-04-26 21:18:11