My slideshow, which is powered by jQuery/JS and involves absolute positioning for each image, is causing me trouble when trying to horizontally center it on the page. No matter what I do, I can't seem to get it right. The challenge is not only getting it centered at full-screen width but also ensuring it stays centered when the browser window is resized.
According to my understanding, elements positioned absolutely should be relative to their next positioned ancestor. In my case, this ancestor seems to be the ".fadein" div (or maybe the "#slideshow" div?), which is relatively positioned. So, if I move the ".fadein" div, the slideshow should theoretically follow suit.
And it does work to some extent. I can shift the ".fadein" div relatively from one side, making the slideshow move accordingly.
However, I'm struggling to find a reliable method to center the slideshow horizontally without either:
1) Creating extra white space on one side of the image, leading to an unnecessary scroll bar at the bottom of the page.
2) Preventing the image from resizing as the browser window is resized.
Edit 1: I managed to get the slideshow centered but still need a solution for resizing...
Hopefully, someone can assist me with this issue. Thanks!
$(function() {
$('.fadein img:gt(0)').hide();
setInterval(function() {
$('.fadein :first-child').fadeOut(2000)
.next('img').fadeIn(2000)
.end().appendTo('.fadein');
}, 5000);
});.fadein {
position:relative;
}
.fadein img{
position:absolute;
left:0;
}<div id="slideshow">
<div class="fadein">
<img src="http://placehold.it/350x150" />
<img src="http://placehold.it/350x150" />
<img src="http://placehold.it/350x150" />
<img src="http://placehold.it/350x150" />
<img src="http://placehold.it/350x150" />
<img src="http://placehold.it/350x150" />
</div>
</div>Edit 2: Although I achieved perfect centring in Safari, Firefox on Mac displays it off-center. Here's the updated CSS:
.fadein {
position:relative;
top:70px;
height:100%;
}
.fadein img {
position:absolute;
left:50%;
top:50%;
-webkit-transform: translate(-50%, -0%);
}
#slideshow {
max-width:100%;
height:100%;
}<div id="slideshow">
<div class="fadein">
<img src="http://placehold.it/350x150" />
<img src="http://placehold.it/350x150" />
<img src="http://placehold.it/350x150" />
<img src="http://placehold.it/350x150" />
<img src="http://placehold.it/350x150" />
<img src="http://placehold.it/350x150" />
</div>
</div>