定心体和大滑块 [英] centering body and big slider
问题描述
我已经设法取消了我的身体，同时尝试在后台放置滑块，因此它也居中，所以即使调整窗口大小也保持居中。
如果您的浏览器允许缩小网站，您可以看到该网站位于中心，但是当您打开它并且滑块图像太大时，它只会与窗口的左边缘对齐。
我是自学成才，所以也许我错过了一些东西，或只是需要一些指导如何解决这个问题。请帮助！
css在这里：
#billboardWrapper { height：600px; width：1800px; margin：-170px auto auto;位置：相对; 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％;背景位置：50％0pt;
.slideLeftLayout .slideTitle，.slideLeftLayout .slideText，.slideLeftLayout .slideLink {left：auto;}
.slideRightLayout .slideTitle，.slideRightLayout .slideText，.slideRightLayout .slideLink {right：50px; text-align ：auto;}
html是（使用firebug拷贝为html是shopify液体）
< html>
< head>
< body id =welcomeclass =indexdata-twttr-rendered =true>
< div id =body>
< div id =utility-wrap>
< div id =header-wrap>
< div id =content-wrap>
< script type =text / javascriptsrc =// dk0684j3ynpoi.cloudfront.net/assets/client.js\">
< div id =gatekeeper-contentclass =>
< div id =body>
< div id =billboardWrapper>
< span id =billboardPrev>上一页< / span>
< span id =billboardNext>下一页< / span>
< div id =billboard>
< div class =slide slideRightLayoutstyle =position：absolute; top：0px; left：0px; z-index：2; opacity：0; display：none; width：1800px; height：600px; >
< div class =slide slideRightLayoutstyle =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]
从删除 on style.css line 287将使滑块内的上一个图标可见，即使您缩小浏览器。 left：40px #billboardPrev，#billboardNext
此外，您的下一步图标不显示。要在style.css第288行显示 您的滑块图片太大。 解决方案： 使用下面的图片作为滑块图片： 和 滑块图像裁剪为960像素宽。还要尝试在代码上使用 I've managed to uncenter my body while trying to position my slider in the background so that it is also centered and so that it remains centered even when the window is resized. The site is live if your browser allows to zoom out you can see that the site is centered but when you open it and the slider image is too big it just aligns with the left edge of the window. I am self-taught so maybe I have missed something or just need some guidance how to fix this. please HELP! the css is here: the html is (copied with firebug as the html is shopify liquid) ![here is what it looks like zoomed out][2]
![with a narrow resolution the slider aligns with the left side of the window and shifts][3]
![this is what I am aiming at?!??][4] Removing the Also your "Next" icon is not displaying. To display that change Your slider image is too big. Thats why it is shifting when zoom-in and out. Solution: Instead of using that big image, split it into 2 imges. Use the following image as your slider image:
and for your The slider image is cropped to 960px width. Also try to use 这篇关于定心体和大滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ background-position：0 -41px; 上的变化 #billboardNext p>
＃gatekeeper-content 使用以下背景和CSS。
background-repeat：repeat-x
position：relative 。#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>
<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>
left:40px from #billboardPrev, #billboardNext on style.css line 287 will make the previous icon visible inside the slider even though you zoom-out the browser.background-position: 0 -41px; on #billboardNext in style.css line 288.#gatekeeper-content use the following background and CSS.background-repeat: repeat-x;
position:relative on your codes.
