[英]CSS image gallery - responsive center aligning
我一直在使用JavaScript控件构建CSS画廊,同时使用人像和风景图片。 我可以使它们在主页<div>
的中心对齐。我已经将图像和控件分组在一个较小的容器中,但是我无法使这两种图像都沿着该容器内的两个轴居中。
以下是我在jsfiddle中所做的首次尝试,欢迎查看所有建议,包括重定向到我可能错过的类似问题。
<div class="image-wrap">
<div id="pic-gallery">
<div class="gal-butt">
<a onclick="plusDivs(-1)">❮</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)">❯</a>
</div>
</div>
</div>
#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;
}
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";
}
添加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)">❮</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)">❯</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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.