Question

我的内容区域以margin:0 auto为中心，width为1280px。当我调整浏览器窗口大小时，只有当浏览器width低于1280px时，右侧的内容才会被切断。有没有办法让整个网站始终居中，以便内容区域同样被左右切割？

Answer 1

您可以尝试使用媒体查询，在该查询中，您可以将固定宽度的div居中，例如：

http://codepen.io/anon/pen/RNqXGW

div {
  background: #d8d8d8;
  text-align: center;
  width: 1280px;
  margin: 0 auto;
}

@media all and (max-width: 1280px) {
   main { 
       /* hide horizontal scrollbar */
       overflow: hidden; 
   }
   div {
       /* these properties cut your div equally both
          on left and right side */
       margin-left: 50%;
       -webkit-transform: translateX(-640px);
       -moz-transform: translateX(-640px);
       transform: translateX(-640px);
   }  
}

Answer 2

您可能需要考虑使用@media等媒体查询进行响应式设计。

如果内容是图片，请考虑将其设为背景，并设置{background-position: center}

Answer 3

如果确实需要将内容width修复为1280px，您可以使用jQuery通过margin属性更正位置在window.resize事件：

$(this).resize(function(){
    var width =  $('#itemToKeepCentered').width();
    var windowWidth = $(this).width()
   $('#itemToKeepCentered').css('margin-left', (windowWidth-width)*0.5);
});

工作示例：https://jsfiddle.net/urahara/oq4uj9q7/2/

注意：@media css也可能对您有用。

Answer 4

我无法发现它对网页非常有用，但是是的......只需要一个非常小的jquery就可以让你的容器在大于窗口宽度时位于中间。

不是＆＃34;右侧被切断＆＃34;，在更大的内容窗口宽度滚动开始，并且默认情况下滚动条将始终在左侧（如果垂直，则为top。。

所以只需使用它来居中滚动：

$(function () {
    scrollTo(($(document).width() - $(window).width()) / 2, 0);
});

这里有一个 fiddle

已编辑：无法使用手动调整大小...尝试调整大小，然后重新加载页面

CSS：调整大小的中心内容

4 个答案: