Question

+现在正在工作

我正试图在页面底部放一个条，中心对齐宽度为1024px。

我已经尝试过margin：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

您可以使用javascript计算位置，如下所示：

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

Answer 2

你可以悄悄地拥有一个父元素并设置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 3

我发现这样做的最好方法是：

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

如何为位置固定的div设置对齐中心？

3 个答案: