【问题标题】：CSS image gallery - responsive center aligningCSS 图片库 - 响应式居中对齐
【发布时间】：2017-08-16 17:50:19
【问题描述】：

我一直在用 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/

【问题讨论】：

这是您要找的吗？ jsfiddle.net/bb85rqpe/2
绝对的传奇，我不敢相信我已经看了 2 小时了，这是血腥的自动保证金！
哈哈太棒了。 fwiw，这是一篇好文章w3.org/Style/Examples/007/center.en.html
干杯老兄，由于某种原因，我无法将您的回复标记为答案或提供您的道具。不过请放心，您已经阻止了我的凶残暴行！
啊，这些只是cmets，只是留下了答案。欣赏道具:)

标签： javascript html css alignment responsive

【解决方案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>

【讨论】：