CSS：以调整大小为中心内容

Question

我有一个以margin:0 auto为中心的内容区域， width为1280px 。 当我调整浏览器窗口的大小时，如果浏览器的width小于1280px则仅右侧内容会被截断。 有没有一种方法可以使整个站点始终居中，从而使内容区域均匀地左右分割？

Answer 1

您可以尝试使用mediaquery将固定宽度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通过window.resize事件的margin属性来更正位置：

$(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，当您的容器大于窗口宽度时，就可以使容器位于中间。

并不是说“右边被切断”，而是在更大的内容下开始滚动窗口宽度，默认情况下，滚动条将始终在左边（如果垂直，则在顶部）。

因此，只需要使用它来使滚动居中：

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

在这里，你有一个小提琴

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