如何将照片幻灯片居中

Question

我在将照片幻灯片居中时遇到问题....我希望你们能帮助我。

Html 格式的照片幻灯片 ：

<div class="w3-content w3-section" style="max-width:500px">
    <img class="mySlides" src="4.jpg">
    <img class="mySlides" src="3.jpg">
    <img class="mySlides" src="2.jpg">
</div>
<script>
    var myIndex = 0;
    carousel();
    function carousel() {
        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);
    }
</script>

Answer 1

这里有一个弹性框建议（我使用了不同尺寸的图像作为证明它们确实在滑动）：

var myIndex = 0;
carousel();
function carousel() {
  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;
}

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

Answer 2

试试这个

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

Answer 3

尝试使用"中心类"进行样式设置。

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

Answer 4

使用margin: auto;和display: block;样式 对于中心图像。 有关显示中心图像，请参阅此处。 http://www.w3schools.com/css/css_align.asp。

尝试以下 css 样式：

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

演示

var myIndex = 0;
carousel();
function carousel() {
  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 img{
  display: block;
  margin:0 auto;
}

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