Acadiandreamer Acadiandreamer -4 years ago 96
CSS Question

CSS image gallery - responsive center aligning

Evening guys,

I have been building a CSS gallery with javascript controls, I'm using both portrait and landscape pictures. I can get them to align in the centre of the main page I have grouped the image and the controls in a smaller container however I cann't get both types of image to be centered both along both axis within that container.

Below is my first effort at a jsfiddle, please take a look all advice including redirects to similar questions that I may have missed are welcome.

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 Source

Add margin: auto to .gal-butt to center that element horizontally. Here is a good resource on centering things 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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download