How To Center A Photoslideshow

I have trouble with centering my photoslideshow.... I hope you guys could help me. Photoslideshow in Html :

&

Solution 1:

Here a flexbox suggestion (I used different size images just as proof they are indeed sliding):

var myIndex = 0;
carousel();

functioncarousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  myIndex++;
  if (myIndex > x.length) {
    myIndex = 1
  }
  x[myIndex - 1].style.display = "block";
  setTimeout(carousel, 2500);
}

.w3-content {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

<divclass="w3-content w3-section"><imgclass="mySlides"src="https://placehold.it/100x100"><imgclass="mySlides"src="https://placehold.it/150x150"><imgclass="mySlides"src="https://placehold.it/200x200"></div>

Solution 2:

Try this

<style>.w3-content {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin: 0 auto;
}
</style>

Solution 3:

Try styling with 'center-class'.

<divclass="w3-content w3-section center-class"style="max-width:500px"><imgclass="mySlides"src="4.jpg" ><imgclass="mySlides"src="3.jpg" ><imgclass="mySlides"src="2.jpg" ></div><style>.center-class{
      display:block;
      margin-left:auto;
      margin-right:auto;
  }
</style>

Solution 4:

Use margin: auto; and display: block; style For center image. see here for display center image. http://www.w3schools.com/css/css_align.asp.

Try below css style:

.w3-contentimg{
      display: block;
      margin:0 auto;
 }

Demo

var myIndex = 0;
carousel();

functioncarousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  myIndex++;
  if (myIndex > x.length) {
    myIndex = 1
  }
  x[myIndex - 1].style.display = "block";
  setTimeout(carousel, 2500);
}

.w3-contentimg{
  display: block;
  margin:0 auto;
}

<divclass="w3-content w3-section"><imgclass="mySlides"src="https://placehold.it/100x100"><imgclass="mySlides"src="https://placehold.it/150x150"><imgclass="mySlides"src="https://placehold.it/200x200"></div>

Share