2010-04-26 55 views
0

嘿所有,我想讓我的底欄居中在屏幕上,但我無法這樣做。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> 

謝謝!

大衛

回答

2

好吧,我得到它通過增加這我的CSS:

left:0; 
right:0; 
-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%; 
} 
+0

感謝您的答覆,但Diodeus使用這些代碼是不是真的在屏幕上居中。當我調整窗口的大小時,它會被切斷。 – StealthRT 2010-04-26 21:02:37

0

我認爲你需要改變的唯一的事情是消除left: 0px;線。該行強制div位於其包含元素的最左邊的像素處。既然你只是想要它居中,margin: 0 auto;應該爲你去除那一行。

+0

感謝您的評論,邁克爾,但拿出左:0px;什麼也沒做。它仍然在同一個地方:o( – StealthRT 2010-04-26 21:18:11