中心AnythingSlider兩邊都有隱藏溢出

我的目標是讓滑塊1280px寬並居中在頁面上。我希望內容的邊緣在雙方都有隱藏的溢出。例如，我希望內容的中心始終保持在頁面的中心位置，並且在瀏覽器調整大小時切斷每一邊，而不顯示水平滾動條。中心AnythingSlider兩邊都有隱藏溢出

有沒有簡單的方法來實現這一目標？

2012-02-25 stephen776

我最終得到了一個有趣的解決方案，在我測試過的Chrome（至少）Chrome，Firefox和Safari中爲我工作。它可能有點冒險，但結果很酷。

所以這就是我做的：我把一個.wrapper寬度爲1280px。保證金是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推到左側，以便看不到其屏幕或瀏覽器窗口是否太小。讓我知道如果這是一個問題，並使它到達它不適合你的地方。

來源

2012-02-26 01:45:57 bassplayer7

哇，這似乎工作的偉大。在玩這個不同的設置之前，我浪費了很多時間。謝謝！ – stephen776 2012-02-26 02:24:07

小屏幕的解決方案是什麼？現在只是好奇，但我可能會遇到類似的問題 – stephen776 2012-02-26 02:36:47

很高興這工作！老實說，我沒有小屏幕的解決方案，但如果您需要更小屏幕的話，我會再多加一些。 – bassplayer7 2012-02-26 02:45:41

添加這個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

來源

2016-05-19 07:38:33

中心AnythingSlider兩邊都有隱藏溢出

回答

相關問題