CSS圖片庫-響應中心對齊

Question

我一直在使用JavaScript控件構建CSS畫廊，同時使用人像和風景圖片。 我可以使它們在主頁<div>的中心對齊。我已經將圖像和控件分組在一個較小的容器中，但是我無法使這兩種圖像都沿着該容器內的兩個軸居中。

以下是我在jsfiddle中所做的首次嘗試，歡迎查看所有建議，包括重定向到我可能錯過的類似問題。

HTML

<div class="image-wrap">
  <div id="pic-gallery">
    <div class="gal-butt">
      <a onclick="plusDivs(-1)">&#10094;</a>
    </div>
    <div class="pic_ver">
      <a target="_blank" href="images/katie_Holding.gif">
        <img class="mySlides" src="images/katie_Holding.gif" border="1" alt="" width="200" height="300">
      </a>
    </div>
    <div class="pic_hor">
      <a target="_blank" href="images/Mindees_1.gif">
        <img class="mySlides" src="images/Mindees_1.gif" border="1" alt="" width="300" height="200">
      </a>
    </div>
    <div class="pic_hor">
      <a target="_blank" href="images/Mindees_2.gif">
        <img class="mySlides" src="images/Mindees_2.gif" border="1" alt="" width="300" height="200">
      </a>
    </div>
    <div class="pic_hor">
      <a target="_blank" href="images/Mindees_3.gif">
        <img class="mySlides" src="images/Mindees_3.gif" border="1" alt="" width="300" height="200">
      </a>
    </div>
    <div class="gal-butt">
      <a onclick="plusDivs(-1)">&#10095;</a>
    </div>
  </div>
</div>

CSS

#pic-gallery {
  margin-left: 330px;
  width: 400px;
  height: 400px;
  border: 1px solid black;
  align-items: center;
  display: flex;
}

.image-wrapper {
  margin: auto;
  align-items: center;
  justify-content: center;
}

.gal-butt {
  font-size: 2.5em;
}

#pic-ver {
  padding-top: 50px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 100px;
}

#pic-hor {
  padding-top: 100px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 50px;
}

JS

 var slideIndex = 1;
 showDivs(slideIndex);

 function plusDivs(n) {
   showDivs(slideIndex += n);
 }

 function showDivs(n) {
   var i;
   var x = document.getElementsByClassName("mySlides");
   if (n > x.length) {
     slideIndex = 1
   }
   if (n < 1) {
     slideIndex = x.length
   }
   for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
   }
   x[slideIndex - 1].style.display = "block";
 }

https://jsfiddle.net/bb85rqpe/1/

Answer 1

添加margin: auto添加到.gal-butt以使該元素水平居中。 這是有關使內容居中的好資源https://www.w3.org/Style/Examples/007/center.en.html

 #pic-gallery { margin-left: 330px; width: 400px; height: 400px; border: 1px solid black; align-items: center; display: flex; } .image-wrapper { margin: auto; align-items: center; justify-content: center; } .gal-butt { font-size: 2.5em; margin: auto; } #pic-ver { padding-top: 50px; padding-right: 0px; padding-bottom: 0px; padding-left: 100px; } #pic-hor { padding-top: 100px; padding-right: 0px; padding-bottom: 0px; padding-left: 50px; } 

 <div class="image-wrap"> <div id="pic-gallery"> <div class="gal-butt"> <a onclick="plusDivs(-1)">&#10094;</a> </div> <div class="pic_ver"> <a target="_blank" href="images/katie_Holding.gif"> <img class="mySlides" src="images/katie_Holding.gif" border="1" alt="" width="200" height="300"> </a> </div> <div class="pic_hor"> <a target="_blank" href="images/Mindees_1.gif"> <img class="mySlides" src="images/Mindees_1.gif" border="1" alt="" width="300" height="200"> </a> </div> <div class="pic_hor"> <a target="_blank" href="images/Mindees_2.gif"> <img class="mySlides" src="images/Mindees_2.gif" border="1" alt="" width="300" height="200"> </a> </div> <div class="pic_hor"> <a target="_blank" href="images/Mindees_3.gif"> <img class="mySlides" src="images/Mindees_3.gif" border="1" alt="Katie holding Mindee" width="300" height="200"> </a> </div> <div class="gal-butt"> <a onclick="plusDivs(-1)">&#10095;</a> </div> </div> </div> <script> var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); if (n > x.length) { slideIndex = 1 } if (n < 1) { slideIndex = x.length } for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex - 1].style.display = "block"; } </script>