的HTML页脚内容的非中心

Question

我想在页面的底部中央的按钮：

<footer> 
    <div class="centerContent"> 
     <input name="submit" type="submit" /> 
    </div> 
</footer> 

的CSS：

.centerContent { 
    text-align: center; 
} 

footer { 
    clear: both; 
    height: 100px; 
    position: absolute; 
    bottom: 0; 
} 

如果我删除CS的“页脚”部分，该按钮当然不在页面的底部，但至少它在页面的水平中心。如果我将“页脚”部分留在Css中，该按钮位于页面的底部，但是......它不再是水平居中了！任何人都知道为什么？非常感谢。

Answer 1

对于水平对齐，您应该将页脚扩展到全宽。将width:100%添加到footer风格。

.centerContent { 
    text-align: center; 
} 

footer { 
    clear: both; 
    height: 100px; 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
} 

Answer 2

footer { 
bottom: 0; 
clear: both; 
height: 100px; 
position: absolute; 
text-align: center; 
width: 100%; 
} 

Answer 3

试加宽度：100％到页脚

footer { 
    width: 100%; 
    clear: both; 
    height: 100px; 
    position: absolute; 
    bottom: 0; 
} 

的位置是：绝对会让页脚失去它的默认宽度。

Answer 4

添加left和right属性您footer，均设置为0：

footer { 
    clear: both; 
    height: 100px; 
    position: absolute; 
    bottom: 0; 

    /* add the following lines */ 
    left: 0; 
    right: 0; 
} 

如果添加width: 100%代替（如其他答案建议），您footer可能会蔓延的页面，因为任何额外的利润和/或填充物。