居中的身體和大滑塊

我試圖將我的滑塊放置在背景中，以便它也處於居中狀態，並且即使在調整窗口大小時仍保持居中狀態，我已設法解開身體。居中的身體和大滑塊

如果您的瀏覽器允許縮小，您可以看到網站居中，但是當您打開它並且滑塊圖像太大時，它只與窗口的左邊緣對齊。

我是自學的，所以也許我錯過了一些東西，或者只是需要一些指導如何解決這個問題。請幫忙！

的CSS是在這裏：

#billboardWrapper {height:600px;width:1800px; margin:-170px auto auto; position:relative; overflow:hidden; } 

#billboard {height:600px;width:1800px;position:relative;/*background:#1c1c1c;*/ background-position: 50% 0pt;} 

#billboardPrev, 
#billboardNext { display:block; text-indent:-9999px; position:absolute; left:40px; top:270px; width:30px; height:30px; cursor:pointer; background: url(arrows.png) no-repeat 0 0; z-index:99;} 
#billboardNext {left:auto; right:40px; background-position:0 -92px; } 

.slide {height:600px;width:1800px;display:none; } 
.slide img {height:600px; width:100%; background-position: 50% 0pt; 
.slideLeftLayout .slideTitle,.slideLeftLayout .slideText,.slideLeftLayout .slideLink {left:auto;} 
.slideRightLayout .slideTitle,.slideRightLayout .slideText,.slideRightLayout .slideLink {right:50px;text-align:auto;}

的HTML是（複製與螢火蟲的HTML是shopify液體）

<html> 
<head> 
<body id="welcome" class="index" data-twttr-rendered="true"> 
<div id="body"> 
<div id="utility-wrap"> 
<div id="header-wrap"> 
<div id="content-wrap"> 
<script type="text/javascript" src="//dk0684j3ynpoi.cloudfront.net/assets/client.js"> 
<div id="gatekeeper-content" class=""> 
<div id="body"> 
<div id="billboardWrapper"> 
<span id="billboardPrev">Previous</span> 
<span id="billboardNext">Next</span> 
<div id="billboard"> 
<div class="slide slideRightLayout" style="position: absolute; top: 0px; left: 0px; z-index: 2; opacity: 0; display: none; width: 1800px; height: 600px;"> 
<div class="slide slideRightLayout" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 3; opacity: 1; width: 1800px; height: 600px;"> 
<img alt="" src="http://static.shopify.com/s/files/1/0059/9612/t/10/assets/slideTwo.jpg?108526"> 
</div> 
</div> 
</div> 
</div>

[這裏是什麼樣子縮小] [2 ] ！[用較窄的分辨率滑塊與窗口左側對齊] [3] ！[這就是我的目標？] [4]

來源

2012-05-23 bikeechick

我認爲你必須使用的位置是：相對的而不是絕對的 – sathis

它不工作，請分享有效的代碼 http://jsfiddle.net/98GWT/ –

@Rizwanabbasi只是增加了一些JS - 就是你問什麼？ – bikeechick

刪除t在style.css行287上，他left:40px from #billboardPrev, #billboardNext將使滑塊內的前一個圖標可見，即使您縮小瀏覽器。

此外您的「下一步」圖標不顯示。要在style.css行288中顯示background-position: 0 -41px;#billboardNext。

您的滑塊圖像太大。這就是爲什麼在放大和縮小時它正在移動。

解決方案：

而不是使用大圖像，將它分成2個imges。

使用下面的圖像作爲滑塊圖片： small slider image

，併爲您的#gatekeeper-content使用下面的背景和CSS。

slider background

background-repeat: repeat-x;

滑塊圖像被裁剪到960像素的寬度。也請嘗試在您的代碼上使用position:relative。

來源

2012-05-23 10:09:15 Libin

謝謝，但不知道爲什麼滑塊不會居中，即使窗口比滑塊本身小。 – bikeechick

僅僅因爲您使用的是真正的大圖像（1800×600）。請記住，網站標準寬度僅爲960px – Libin

儘管寬度很大，我仍希望隱藏溢出 – bikeechick

居中的身體和大滑塊

回答

相關問題