CSS3滑块-相对div内的绝对定位，用于响应幻灯片放映

我正在修改从中获得的一些CSS代码。它是一个视差CSS3滑块

我已经尝试了几乎所有的方法，我的问题是我不能在浏览器中以固定的最大宽度将滑动div da.slide居中。最大宽度为970px，并将在浏览器调整大小时缩小。我试过使用margin:0 auto和left:50%，但它现在仍在工作-它只是挂在左边

我认为可能的问题是滑块div的位置。当我将其从绝对更改为相对时，第一张幻灯片有效，但其余幻灯片消失/在彼此下方滑动。有没有可能使滑动div居中

以下是CSS3代码：

.da-slider{
    width: 100%;
    min-width: 320px;
    height: 300px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    background: transparent url(../images/waves.png);
    background-repeat:repeat-x;
    -webkit-transition: background-position 1s ease-out 0.3s;
    -moz-transition: background-position 1s ease-out 0.3s;
    -o-transition: background-position 1s ease-out 0.3s;
    -ms-transition: background-position 1s ease-out 0.3s;
    transition: background-position 1s ease-out 0.3s;
}

.da-slide{
    position: absolute;
    max-width: 970px;
    width:100%; 
    height: 100%;
    top: 0px;
    left: 0px;  
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    text-align: left;

}
.da-slide-current{
    z-index: 1000;
}
.da-slider-fb .da-slide{
    left: 100%;
}
.da-slider-fb  .da-slide.da-slide-current{
    left: 0px;
}
.da-slide h2,
.da-slide p,
.da-slide .da-link,
.da-slide .da-img{
    position: absolute;
    opacity: 0;
    left: 110%;
}
.da-slider-fb .da-slide h2,
.da-slider-fb .da-slide p,
.da-slider-fb .da-slide .da-link{
    left: 10%;
    opacity: 1;
}

HTML是：

<div id="da-slider" class="da-slider">
                <div class="da-slide">
                    <h2>Easy management</h2>
                    <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
                    <a href="#" class="da-link">Read more</a>
                    <div class="da-img"><img src="images/2.png" alt="image01" /></div>
                </div>
                <div class="da-slide">
                    <h2>Revolution</h2>
                    <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
                    <a href="#" class="da-link">Read more</a>
                    <div class="da-img"><img src="images/3.png" alt="image01" /></div>
                </div>
                <div class="da-slide">
                    <h2>Warm welcome</h2>
                    <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
                    <a href="#" class="da-link">Read more</a>
                    <div class="da-img"><img src="images/1.png" alt="image01" /></div>
                </div>
                <div class="da-slide">
                    <h2>Quality Control</h2>
                    <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
                    <a href="#" class="da-link">Read more</a>
                    <div class="da-img"><img src="images/4.png" alt="image01" /></div>
                </div>
                <nav class="da-arrows">
                    <span class="da-arrows-prev"></span>
                    <span class="da-arrows-next"></span>
                </nav>
        </div>

任何帮助都将不胜感激

.da-slide{
    position: relative;
    margin: 0 auto;
    max-width: 970px;  
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    text-align: left;

}

这似乎对我有用。不知道你到底想做什么

绝对定位从页面流中提取元素。top、left、right和bottom属性是指其相对于其父元素的位置。通过将元素扩展到100%宽度和100%高度，元素将扩展到其所在容器的大小，禁用的是居中功能

您应该为元素指定最小宽度，以便浏览器知道展开/缩回长方体的大小。这些项目的规模应采用灵活的计量方法，如百分比。给它100%的宽度意味着元素将扩展到其所在容器的大小。“最大值”和“最小值”允许图元在设定的大小下停止扩展

希望有帮助， B

这似乎对我有用。不知道你到底想做什么

绝对定位从页面流中提取元素。top、left、right和bottom属性是指其相对于其父元素的位置。通过将元素扩展到100%宽度和100%高度，元素将扩展到其所在容器的大小，禁用的是居中功能

您应该为元素指定最小宽度，以便浏览器知道展开/缩回长方体的大小。这些项目的规模应采用灵活的计量方法，如百分比。给它100%的宽度意味着元素将扩展到其所在容器的大小。“最大值”和“最小值”允许图元在设定的大小下停止扩展

希望有帮助，

---

B

这是事后的事，但我和你有一个类似的问题，拉贾。具体来说，我使用的是作为另一个模板的一部分获得的da滑块，但是滑块中的图像相对于正在查看它们的浏览器没有正确调整大小。因此，在PC上看起来不错的较大图像在iPhone上观看时看起来相当大

为了解决这个问题，我将每个da幻灯片div中的图像宽度设置为100%。接下来，我从da slider类中删除了height属性。最后，我为da幻灯片设置display:none，为da幻灯片当前类设置display:block。这会阻止父/容器div同时显示所有图像。最终结果是仅显示当前图像，并且容器div相对于浏览器窗口的宽度展开/收缩

下面是最终da slider类的外观：

.da-slider{
    width: 100%;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    box-shadow: 0px 1px 1px rgba(0,0,0,0.2), 0px -2px 1px #fff;
    -webkit-transition: background-position 1.4s ease-in-out 0.3s;
    -moz-transition: background-position 1.4s ease-in-out 0.3s;
    -o-transition: background-position 1.4s ease-in-out 0.3s;
    -ms-transition: background-position 1.4s ease-in-out 0.3s;
    transition: background-position 1.4s ease-in-out 0.3s;
}

以及da幻灯片和da幻灯片当前类别，分别为：

.da-slide{
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    text-align: left;
    display: none;
}
.da-slide-current{
    z-index: 10;
    display: block;
}

最后，da幻灯片分区如下所示：

  <div id="da-slider" class="da-slider">
    <div class="da-slide">
      <img src="assets/img/index/panel1.jpg" style="width: 100%;">
    </div> 
    ...

---

再说一次，你的问题已经一年多了，但希望这能对你或其他人有所帮助。

这有点事后诸葛亮，但我遇到了与你类似的问题，拉贾。具体来说，我使用的是作为另一个模板的一部分获得的da滑块，但是滑块中的图像相对于正在查看它们的浏览器没有正确调整大小。因此，在PC上看起来不错的较大图像在iPhone上观看时看起来相当大

为了解决这个问题，我将每个da幻灯片div中的图像宽度设置为100%。接下来，我从da slider类中删除了height属性。最后，我为da幻灯片设置display:none，为da幻灯片当前类设置display:block。这会阻止父/容器div同时显示所有图像。最终结果是仅显示当前图像，并且容器div相对于浏览器窗口的宽度展开/收缩

下面是最终da slider类的外观：

.da-slider{
    width: 100%;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    box-shadow: 0px 1px 1px rgba(0,0,0,0.2), 0px -2px 1px #fff;
    -webkit-transition: background-position 1.4s ease-in-out 0.3s;
    -moz-transition: background-position 1.4s ease-in-out 0.3s;
    -o-transition: background-position 1.4s ease-in-out 0.3s;
    -ms-transition: background-position 1.4s ease-in-out 0.3s;
    transition: background-position 1.4s ease-in-out 0.3s;
}

以及da幻灯片和da幻灯片当前类别，分别为：

.da-slide{
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    text-align: left;
    display: none;
}
.da-slide-current{
    z-index: 10;
    display: block;
}

最后，da幻灯片分区如下所示：

  <div id="da-slider" class="da-slider">
    <div class="da-slide">
      <img src="assets/img/index/panel1.jpg" style="width: 100%;">
    </div> 
    ...

---

再说一次，你的问题已经有一年多的历史了，但希望这能对你或其他人有所帮助。

哦，我的话！这在IE和Opera中也非常有效。谢谢你，斯奇维兹！我不知道宽度的问题，但谢谢你帮我澄清。我真的很感谢你的帮助。哦，我的话！这在IE和Opera中非常有效

---

还有。谢谢你，斯奇维兹！我不知道宽度的问题，但谢谢你帮我澄清。非常感谢您的帮助。谢谢您的回复@andyengle！即使已经一年了，我相信你的回答仍然会有帮助。感谢发帖：感谢您的回复@andyengle！即使已经一年了，我相信你的回答仍然会有帮助。多谢发帖：