當寬度未知時，如何為Java幻燈片放映的圖像居中？

Question

我在要幻燈片放映的目錄中有圖像列表。
這些圖像是隨機大小。 無論寬度如何，我都需要居中。
由於寬度不同，我無法設置手動邊距。 任何幫助將不勝感激。

 var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) { slideIndex = 1 } if (n < 1) { slideIndex = slides.length } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active"; } 

 .imgClass { width: auto; height: 380px; } .slideContainersContainer { width: auto; height: 100%; float: left; } .slideshow-container { width: auto; background-color: #ffffff; transition: ease-in-out .7s; flexbox: flex; margin-left: auto; margin-right: auto; } .mySlides { display: none; } .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; } .next { right: 0; border-radius: 3px 0 0 3px; } .prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); } .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } .dot { cursor: pointer; height: 5px; width: 5px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; padding: .2%; } .active, .dot:hover { background-color: #717171; } .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from { opacity: 0 } to { opacity: 1 } } @keyframes fade { from { opacity: 0 } to { opacity: 1 } } 

 <div class="slideContainersContainer"> <div class="slideshow-container"> <!-- This section calls the first image. --> <div class="mySlides fade"> <div class="numbertext">1 / 1</div> <img class="imgClass" alt="" src="images/paintings/paintings1.png"> <div class="text"> <span class="title">Caption Text</span> <span class="origStat">Originoal Status:Sold</span> <a class="buyPrints">Purchase Prints</a></div> </div> <!-- This section calls the second image. --> <div class="mySlides fade"> <div class="numbertext">1 / 2</div> <img class="imgClass" alt="" src="images/paintings/paintings2.png"> <div class="text"> <span class="title">Caption Text</span> <span class="origStat">Originoal Status:Sold</span> <a class="buyPrints">Purchase Prints</a></div> </div> <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> </div><br> <div style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> </div></div> 

對於不便之處，我補充了其余代碼。 任何幫助將不勝感激。

Answer 1

您可以將flexbox與圖像的父容器一起使用。

.mySlides {
    display: flex;
    justify-content: center;
    align-items: center;
  }