CODEWITHSUNDEEP
htmlcss
Ben
Ben

Reputation: 1

Centering images horizontally in absolute div

I am having difficulty centering images horizontally within a div on a slideshow I am creating (which stops on the final slide). The part I am getting hung up on is that absolute positioning is needed by my JS to run the slideshow, and everything I have been trying is either not centering the images or causing the slideshow to not function correctly. Here is the code I am 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 also setup a CodePen: https://codepen.io/upplepop/pen/jmoMmQ

Upvotes: 0

Views: 30

Answers (2)

j-printemps
j-printemps

Reputation: 1298

You can also add text-align: center; to your div. And keep your images set to display: inline; or display: inline-block;

$("#slideshow > div:gt(0)").hide();


var timesRun = 0;
var interval = setInterval(function(){
	timesRun += 1;
	if(timesRun === 3){
	clearInterval(interval);
}
$('#slideshow > div:first')
	.fadeOut(800)
	.next()
	.fadeIn(800)
	.end()
	.appendTo('#slideshow');
}, 2000);
#slideshow > div {
  position: absolute;
  width: 100%;
  text-align: center;
}

img{
  position: relative;
  display: inline-block;
}
<head>
</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>

</body>

Upvotes: 0

vlk
vlk

Reputation: 1454

There are 2 way to do it:

1) set a width for the parent absolute and use margin: auto; and display: block to center the image

$("#slideshow > div:gt(0)").hide();


var timesRun = 0;
var interval = setInterval(function(){
	timesRun += 1;
	if(timesRun === 3){
	clearInterval(interval);
}
$('#slideshow > div:first')
	.fadeOut(800)
	.next()
	.fadeIn(800)
	.end()
	.appendTo('#slideshow');
}, 2000);
#slideshow > div {
  position: absolute;
  width: 100%;
}

img{
  position: relative;
  margin: auto;
  display: block;
}
<head>
</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>

</body>

2) Set a width for the absolute parent and use absolute positioning and transform for the image.

$("#slideshow > div:gt(0)").hide();


var timesRun = 0;
var interval = setInterval(function(){
	timesRun += 1;
	if(timesRun === 3){
	clearInterval(interval);
}
$('#slideshow > div:first')
	.fadeOut(800)
	.next()
	.fadeIn(800)
	.end()
	.appendTo('#slideshow');
}, 2000);
#slideshow > div {
  position: absolute;
  width: 100%;
}

img{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}
<head>
</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>

</body>

Upvotes: 1

Related Questions