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-如何将页面居中而不添加页边距？

回答

相关问题