居中 AnythingSlider，两侧隐藏溢出

发布于 2025-01-08 22:03:03 字数 129 浏览 0 评论 0原文

我的目标是让滑块宽 1280 像素并位于页面中央。我希望内容的边缘两侧都有隐藏的溢出。例如，我希望内容的中心始终位于页面的中心，当浏览器调整大小时，每一侧都会被切断，并且不会出现水平滚动条。

有没有一种简单的方法可以实现这一点？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

倚栏听风 2025-01-15 22:03:03

我最终得到了一个有点有趣的解决方案，它在（至少）Chrome、Firefox 和 Safari 中对我有用，我在那里进行了测试。可能有点老套，但结果很酷。

所以这就是我所做的：我放置了一个宽度为 1280px 的 .wrapper。边距为 0 auto 除了左边距，这是所有事情发生的地方。左边距需要设置为 div 宽度的一半。在本例中，该值为 640px。但是，由于它必须溢出到左屏幕之外，因此必须设置为负数（即 -640px）。然后，为了扭转这种效果，当屏幕更大时，屏幕 left:50% 将其推到正确的位置。显然，为了让 margin:0 auto 真正发挥作用，position 必须设置为 relative （或 absolute >如果你愿意的话）。

.wrapper { width:1280px;
           margin:0 auto 0 -640px; 
           position:relative; 
           left:50% 
         }

唯一的问题
不过，我发现了一个问题。因为我们使用负边距，所以如果屏幕或浏览器窗口太小，它会将 div 推到左侧，导致人们无法看到。如果这是一个问题并导致它对您不起作用，请告诉我。

I ended up with a somewhat interesting solution that worked for me in (at least) Chrome, Firefox, and Safari where I tested it. It may be slightly hacky, but the result was cool.

So here's what I did: I put a .wrapper with a width of 1280px. The margin is 0 auto except the left margin which is where it all happens. The left margin needs to be set to half of the div width. In this case that would be 640px. However, because it must overflow outside of the left screen it must be set to a negative number (i.e. -640px). Then in order to reverse that effect when the screen is larger then screen a left:50% pushed it over the correct amount. Obviously in order for the margin:0 auto to actually work, the position must be set to relative (or absolute if you would like).

.wrapper { width:1280px;
           margin:0 auto 0 -640px; 
           position:relative; 
           left:50% 
         }

the one problem
I found one problem with it, though. Because we are using negative margin, it pushes the div to the left to where one can not see if their screen or browser window is too small. Let me know if this is a problem and makes it to where it doesn't work for you.

回复收藏 0 原文

强者自强 2025-01-15 22:03:03

添加此 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%);
}

使用代码和示例解决方案
在此处输入链接说明

Add this css class

  .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%);
}

solution with code and example
enter link description here

回复收藏 0 原文

~没有更多了~