爲什麼填充剩下：50％最終停止工作？

我想中心一個div，所以我寫<div style="padding-left: 50%;"> test </div>。該文本居中很好，直到我調整瀏覽器的大小非常小。（〜300像素寬度）。然後它開始顯示一個水平滾動條。爲什麼填充剩下：50％最終停止工作？

爲什麼瀏覽器（Chrome12，Opera11.50，Firefox5）實現該行爲？在我看來，這根本不正確。沒有內容需要滾動條。我該如何禁用它，或者我該怎麼做才能集中我的內容？

2011-07-04 Blub

「沒有內容需要滾動條」您的意思是「測試」這個詞不是內容？ – BoltClock

中心divs通常採用保證金屬性而不是填充屬性來處理。不同的瀏覽器處理填充不同，因此使用邊距更爲安全。 –

@BoltClock：文本「test」的長度不夠長，無法在300像素瀏覽器中使用滾動條。爲什麼滾動條開始出現呢？ – Blub

如果要使用中心文本，請使用text-align:center。如果要將元素居中使用margin:0 auto。請提供更多關於你想要完成的細節。

您可以通過修改overflow property來防止滾動條的出現。

2011-07-04 15:04:33 Radu

所以我的問題是爲什麼我的方法不起作用。我的意思是，它應該是非常簡單的：我說：請填寫左邊50％。它不起作用？ – Blub

@Blub，我無法重現您引用的行爲。請參閱：http://jsfiddle.net/radu/K36Kq/show/。我測試過Chrome 12，FF3.6.7，Opera 11.10和IE9，我無法在300px的窗口寬度顯示滾動條。 – Radu

固定寬度的容器可以使用邊距居中。將左右邊距設置爲自動將會使您的div居中。

<div style="width:900px;margin:0 auto;"> 
    test 
</div>

2011-07-04 15:04:28 Jrod

回答