CSS-如何將頁面居中而不添加頁邊距？

我們必須通過SharePoint 2013生成的網頁有1024我們用下面的風格上的主要內容DIV的寬度：CSS-如何將頁面居中而不添加頁邊距？

#container_master { 
    width:1024px !important; 
    margin-left: auto !important; 
    margin-right: auto !important; 
    background-color:#FFF !important; 
}

這行之有效的決議大於 1024每當有人設置他們的分辨率達到了1024（我們有幾個人這麼做），左右兩邊有一些額外的填充，這會導致水平滾動條。

每當我使用Firebug，我看到正在生成以下HTML：

<div aria-relevant="all" aria-live="polite" style="margin-left: 20px; margin-right: 20px; min-width: 1024px;">

的20像素的左邊和右邊這個利潤率的問題。我發現，它可以通過添加下面的CSS被刪除：

html body.ms-backgroundImage form#aspnetForm div#s4-workspace.ms-core-overlay div#s4-bodyContainer div#contentRow div { 
    margin-left: 0px !important; 
    margin-right: 0px !important; 
}

但是，每當我這樣做，頁面已不再集中在屏幕尺寸大於1024，就如何使在網頁「全面任何想法屏幕「爲那些使用1024分辨率，同時使其爲更高分辨率的人居中？

來源

2014-03-06 Mark

margin：0 auto！important; ？ – SamotnyPocitac

在我看來，水平滾動是由硬編碼寬度引起的，而不是您的利潤率。你應該真的重新評估你對'！important'的使用。 – cimmanon

請拜託！你**大量**過度使用！重要的'。需要有一個非常好的理由來使用它，並且這不會使接縫成爲其中一個原因。 –

在CSS中有一個很好的技巧。

使用：

html body.ms-backgroundImage form#aspnetForm div#s4-workspace.ms-core-overlay div#s4-bodyContainer div#contentRow div { 
    margin-left: 0 auto !important; 
    margin-right: 0 auto !important; 
}

這是一樣的：

html{ margin: 0px; margin: auto; }

有時IE將不使用保證金：汽車;要解決這個問題（以某種方式），請添加：

body { 
    text-align: center; 
}

但這隻發生在舊的IE瀏覽器中。

來源

2014-03-06 15:11:50

使用max-width：

#container_master { 
    max-width:1024px !important; 
    margin-left: auto !important; 
    margin-right: auto !important; 
    background-color:#FFF !important; 
}

來源

2014-03-06 15:13:53 TrungDQ

這不起作用，因爲邊距和填充不包含在width屬性中。 –

@KeesSonnema你怎麼認爲這不起作用？右/左邊距設置爲auto，如果元素與其父元素一樣寬，則等於0。 – cimmanon

對不起，我讀過這個錯誤。我以爲你只是將寬度改爲最大寬度，但你也改變了邊距。沒關係：） –

需要更換，最大寬度width屬性，重置最小寬度：

http://jsfiddle.net/ht2Gc/

div { 
    max-width: 1024px !important; /* here */ 
    margin-left: auto !important; 
    margin-right: auto !important; 
    background-color: #FFF !important; 
    min-width: 0 !important; /* and here */ 
}

來源

2014-03-06 15:45:53 cimmanon

**很多畫面寬度爲1024像素。對於較小的屏幕，當您希望具有特定寬度的網頁/ Web應用程序時（您可能要考慮使用最小寬度和最大寬度），水平滾動條不可避免。除非你正在爲一個特定的瀏覽器設計你的網站，比如Chrome，否則我會建議你的網頁縮小4px。大多數網頁瀏覽器的邊上都有小邊框，這意味着1024像素的屏幕在顯示屏上會丟失幾個像素。請考慮上述事情。

你或許可以用下面的CSS線解決您的特定問題

body{margin:0;padding:0}

這裏會發生什麼事是你告訴人體有沒有填充，這意味着你的網站有關於雙方沒有額外的保證金。

這應該解決您的問題與保證金。（在這種情況下1020px與1030px之間）的窗口大小

@media only screen and (min-device-width: 1020px) and (max-device-width: 1030px){ 
    body{overflow:hidden} 
}

此檢查是否是在一定的限度之內，如果當你不希望它的滾動條仍然出現，則也將這些行添加到你的CSS如果是這種情況，身體會忽略比窗口更大的所有內容，從而禁用滾動條。

來源

2014-03-06 16:08:38

CSS-如何將頁面居中而不添加頁邊距？

回答

相關問題