I've been struggling to center images horizontally within a div on a slideshow I'm working on. The challenge is that my JavaScript requires absolute positioning to run the slideshow, and all my attempts at centering the images have either failed or caused issues with the functionality of the slideshow. Below is the code I'm currently using:
<head>
<style>
#slideshow > div {
position: absolute;
}
</style>
</head>
<body>
<div id="slideshow">
<div>
<img src="http://imagizer.imageshack.us/v2/499x469q90/538/Dn4xDQ.jpg">
</div>
<div>
<img src="http://imagizer.imageshack.us/v2/500x500q90/537/9WJ0XM.jpg">
</div>
<div>
<img src="http://imagizer.imageshack.us/v2/432x432q90/538/xlMaV6.jpg">
</div>
<div>
<img src="http://imagizer.imageshack.us/v2/640x473q90/912/LRvTD5.jpg">
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'>
</script>
<script>
$("#slideshow > div:gt(0)").hide();
var timesRun = 0;
var interval = setInterval(function(){
timesRun += 1;
if(timesRun === 3){
clearInterval(interval);
}
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
</script>
</body>
</html>
I've created a CodePen showcasing this issue: https://codepen.io/upplepop/pen/jmoMmQ