Warum zentriert sich diese HTML-Fotogalerie nicht?

Ich versuche, eine Foto-Bibliothek auf meiner Webseite zu platzieren, aber es wird einfach nicht richtig zentriert und es macht mich verrückt. Irgendwelche Vorschläge? Ich habe versucht, so viele verschiedene Dinge für die Zentrierung im Code aber nichts setzen funktioniert:/Warum zentriert sich diese HTML-Fotogalerie nicht?

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:

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

Quelle

2017-07-08 MrMeowMeow

Beitrag alle relevanten HTML/CSS/js, so dass wir ein [MCVE] haben. –

Wenn Sie versuchen, den Lochinhalt in die Mitte zu bekommen, können Sie versuchen, die '

' html-Tag –

Zunächst setzen die Anzeige zu Block. geben dann die Marge zu Auto

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

}

Quelle

2017-07-08 18:15:19 Soumya

Ah danke, das hat perfekt funktioniert! Ich habe keine Ahnung, warum das ursprünglich gar keiner war :) – MrMeowMeow

Herzlich Willkommen ...: D – Soumya

Sie müssen es als display: flexbox anzeigen, da Sie eine 0 verwendenAttribute wie align-content, align-self

Quelle

2017-07-08 17:49:14 csldry

Warum zentriert sich diese HTML-Fotogalerie nicht?

Antwort

Verwandte Themen