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: flexbox，因为您使用的是flexbox，align-content

等align-self个属性

Answer 2

首先将显示设置为阻止。然后将保证金提供给自动

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

}

为什么这个html照片库不能居中？

2 个答案: