Struggling to center a photo library on my webpage is really frustrating me. Does anyone have any tips? I've experimented with different ways to center it in the code, but nothing seems to do the trick :/
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">
// Additional images ...
</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;
}