的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可能會蔓延的頁面，因爲任何額外的利潤和/或填充物。