Проблема с нижним центром нижнего колонтитула CSS

Question

Привет всем, я пытаюсь расположить нижнюю панель по центру экрана, но я не могу этого сделать.

<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> 

Спасибо! * * 1004

David

Answer 1

Хорошо, я получил это, добавив это в мой CSS:

left:0;
right:0;

Answer 2

Я думаю, единственное, что вам нужно изменить, это удалить строку left: 0px;. Эта строка заставляет div находиться в крайнем левом пикселе содержащего его элемента. Поскольку вы просто хотите, чтобы он был отцентрирован, margin: 0 auto; должен сделать это для вас, удалив одну строку.

Answer 3

Попробуйте это:

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