我们有一个通过 SharePoint 2013 生成的网页,宽度为 1024。我们在主要内容 div 上使用以下样式:
#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;">
左右这20px的外边距就是问题所在。我发现可以通过添加以下 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 分辨率的页面“全屏”同时使分辨率更高的页面居中的任何想法?
最佳答案
在 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 不会使用 margin: auto;要解决这个问题(以某种方式)添加:
body {
text-align: center;
}
但这只发生在旧的 IE 浏览器上。
关于html - CSS-如何在不添加边距的情况下使页面居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22228348/