Как установить выравнивание по центру для div с фиксированной позицией?

Question

+ Сейчас работает

Я пытаюсь сделать полосу внизу страницы шириной 1024 пикселя по центру.

Я уже пробовал поля: 0 auto и text-align: center.None сработало.

Вот мой код:

<style>
  .bf_footer{
     position:fixed; 
     bottom:0px; 
     width:1024px;
     background:#000;
     height:20px;
     padding-bottom:5px;
     left:50%; 
     margin-left:-512px;
   }
</style>



<div class="bf_footer"></div>

Answer 1

вы можете иметь родительский элемент и установить margin:0 auto;, тогда вы можете сделать свой эффект.

<div style="background:blue;height:0px;width:300px;margin:0 auto;">
    <div class="bf_footer"></div>
</div>

CSS

.bf_footer{
     position:absolute; 
          width:300px;
     background:#000;
     height:20px;
     bottom:0; 
   }

http://jsfiddle.net/MvPsd/

Answer 2

Лучший способ найти для меня это:

 <style>
     .divtobealigned{             
         position:fixed;
         background:grey;
         width:400px;
         left:50%;
         margin-left:-200px; <!-- Half of the width-->

     }
 </style>
 <div class="divtobealigned">Div with position absolute centered on the screen.</div>

http://jsfiddle.net/vinicius5581/9Jk9k/

Answer 3

Вы можете использовать JavaScript для расчета позиции следующим образом:

$("div.bf_footer").css({
   left: ($(window).width() / 2) - ($("div.bf_footer").width() / 2)
});