CSS页脚栏底部中心问题

时间:2010-04-26 20:49:41

标签: 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> 

谢谢!

大卫

3 个答案:

答案 0 :(得分:2)

好的,我把它添加到我的CSS:

left:0;
right:0;

答案 1 :(得分:0)

我认为您唯一需要更改的是删除left: 0px;行。此行强制div位于其包含元素的最左侧像素。由于您只是想让它居中,margin: 0 auto;应该为您删除一行。

答案 2 :(得分:-1)

试试这个:

#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%;
}