爲什麼這個html照片庫不居中？

我試圖把一個照片庫放在我的網頁上，但它只是不能正確居中，而且這使我瘋狂。有什麼建議麼？我試圖把這麼多不同的事情在代碼中，但沒有中心的工作原理：/爲什麼這個html照片庫不居中？

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; 
}

來源

2017-07-08 MrMeowMeow

後所有相關的HTML/CSS/JS，使我們有一個[MCVE。 –

如果你試圖讓洞的內容到達中心，你可以試試'

'html標籤 –

起初設置顯示到塊。然後給保證金到自動

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

}

來源

2017-07-08 18:15:19 Soumya

啊謝謝，這很好用！我不知道爲什麼甚至設置爲none :) – MrMeowMeow

最受歡迎...：D – Soumya

您需要將其顯示爲display: flexbox，因爲您使用的是flexbox個屬性像align-content，align-self

來源

2017-07-08 17:49:14 csldry

爲什麼這個html照片庫不居中？

回答

相關問題