html - 为什么这个 html 照片库没有居中？

Question

我想在我的网页上放置一个照片库，但它无法正确居中，这让我抓狂。有什么建议么？ 我试过在代码中放置很多不同的东西，但没有任何效果:/

HTML:

  <div style="display: inline-block; position: relative; text-align: center; width: 100%" >
    <h3 align="center" class="highlight">Photo Library</h3>
    <div align="center" class="" style="max-height:450px;max-width:800px;margin: 30px 30px 30px 30px; text-align: center">
      <img class="mySlides" src="images/slideshow/1.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/2.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/3.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/4.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/5.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/6.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/7.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/8.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/9.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/10.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/11.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/12.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/13.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/14.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/15.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/16.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/17.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/18.png" style="width:auto">
      <img class="mySlides" src="images/slideshow/19.png" style="width:auto">
      <img class="mySlides" src="images/slideshow/20.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/21.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/22.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/23.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/24.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/25.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/26.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/27.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/28.jpg" style="width:auto">
    </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, 5000);    
  }
</script>

CSS:

.mySlides {
    display:none;
    width: 200px;
    height: 400px;
    align-self: center;
    text-align: center;
    align-content: center;
}

Answer 1

首先将display设置为block。然后把 ma​​rgin 给 auto

.mySlides {
    display:block;
    margin: auto;
    width: 200px;
    height: 400px;

}