Question

我的页脚有问题。始终是Darn页脚。无论如何，它不会出现在页面的中心。我尝试使用text-align:center＆amp; margin:auto但它不会离开左侧。

我要在这里发布代码;也许你能找到问题？

HTML

<div id="footer">
 <div class="footertxtl">
 </div>
   <div class="footertxtr">
   </div>
 <div class="designer">
 </div>
</div>

CSS

#footer {
    background-image:url(images/footer/footer.png);
    background-repeat:no-repeat;
    text-align:center;
    height:223px;
    clear:both;
    position:relative;
    width:100%;}

.footertxtl {
    font-size:10px;
    text-align:left;
    float:left;
    padding-left:60px;
    padding-top:165px;
    height:auto;
    width:auto;}

.designer {
    font-size:10px;
    text-align:center;
    padding-top:205px;
    height:auto;
    width:auto;}

.footertxtr {
    text-align:right;
    float:right;
    font-size:10px;
    padding-right:24%;
    padding-top:155px;
    height:auto;
    width:auto;}

Answer 1

您的页脚设置为100％宽度，这意味着它将始终填充正文的整个宽度，除非它包含在另一个div中。

因此，页脚宽度为100％，一个div向左浮动，另一个向右浮动，另一个div向右浮动。

给#footer一个固定的宽度，然后给它margin: 0 auto;这将把这个div放在中心

Answer 2

您可以发布jsfiddle示例吗？如果您的#footer中的容器不是100％宽，则可以使用margin:0 auto;将其居中。

Answer 3

如果未设置恒定宽度，则默认设置为100％。您的“宽度：自动”不符合您的预期。如果你不能设置恒定宽度而你不介意IE7，你可以这样做：

   #footer{
      float: left;
      display: inline-block;
   }

记得添加溢出：隐藏;到父div

Answer 4

如果你有一个页面其余部分的包装器设置了固定宽度或百分比（75％），那么将页脚粘贴在包装器中

<body style="text-align: center;">
 <div id="wrapper" style="text-align: left; width: 80%; margin: 0 auto;">
  <div id="Header">............</div>
  <div id="MainContent">.......</div>
  <div id="Footer">input content here</div>
 </div>
</body>

包装器将自动居中所有内容

#footer {
   background: transparent url(images/footer/footer.png) no-repeat left top;
   text-align:center;
   height:223px;
   clear:both;
}

页脚不会居中：S

4 个答案: