Question

我的目标是让滑块1280px宽并居中于页面上。我希望内容的边缘在两边都有隐藏的溢出。例如，我希望内容中心始终保持在页面的中心，在浏览器调整大小时每一面都被切断，没有出现水平滚动条。

有没有直接的方法来实现这个目标？

Answer 1

我最终找到了一个有趣的解决方案，在我（至少）Chrome，Firefox和Safari中为我测试了它。它可能有点hacky，但结果很酷。

所以这就是我的所作所为：我设置宽度为.wrapper的{{1}}。保证金是1280px ，除了左边距，这是它发生的全部。左边距需要设置为0 auto宽度的 half 。在这种情况下，div。但是，因为它必须在左侧屏幕之外溢出，所以必须将其设置为负数（即640px）。然后，为了在屏幕较大时反转该效果，然后屏幕-640px将其推过正确的量。显然，为了使left:50%能够真正发挥作用，margin:0 auto必须设置为position（或relative，如果您愿意的话）。

absolute

一个问题
不过我发现了一个问题。因为我们使用负边距，所以它将div推向左边，如果他们的屏幕或浏览器窗口太小则无法看到。如果这是一个问题，请告诉我，并告诉它不适合你。

Answer 2

添加此css类

  .overflowbothsides{
  vertical-align: middle;
  margin: 0 auto;
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}

解决方案与代码和示例 enter link description here

中心AnythingSlider两边都有隐藏的溢出

2 个答案: