Responsive CSS to center (horizontal align) X number of button images in CEWP

Question

I created a row of buttons that enlarge on hover on a Sharepoint 2013 webpage , here is the code:

​​​<style type="text/css">

.thumbnail {
position:relative;
width:100px;
height:100px;
display:block;
}

.thumbnail:hover {
top:-25px;
width:130px;
height:130px;
z-index: 999;
}

a img{
float: right;
}

</style>​​​​​​​​​​​​​​​​ 

<a href="site.aspx"> 
<img src="image.png" class="thumbnail"      alt="" style="margin: 5px;"/>​​ </a>
<a href="site1.aspx">
<img src="image1.png" class="thumbnail" alt="" style="margin: 5px;"/> </a>
<a href="site2.aspx">
<img src="image2.png" class="thumbnail" alt="" style="margin: 5px;"/></a>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
<a href="sites3.aspx">
<img src="image3.png" class="thumbnail" alt=""  style="margin: 5px;"/> </a>
<a href="site4.aspx">
<img src="image4.png" class="thumbnail" alt="" style="margin: 5px;"/></a>

Now, with the following command I made those buttons aligned horizontally instead of vertically.

    a img{
    float: right;
    }

Problem is, this way they are aligned right (or left, if I switch the command to "left"), but I need to have them centered. At first I solved the problem by using CSS and setting the margins (margin-left and margin-right), but this solution causes troubles when I resize the browser windows or when I change the screen resolution. Any ideas on how have them at the center of the screen?

Answer 1

position:relative means an element is positioned relative to its container

Since you haven't defined a container yourself, the element will be positioned relative to the first parentelement with positioning defined (probably the WebPart here)

When that WebPart gets wider, your 5 buttons are floating to the left or right inside the webpart.

So you need to create a container IN the webpart, center that container, then evenly space your objects inside.

<div class='thumbnails'>
  <a href="site.aspx"><img src="https://365csi.nl/3.png" /></a>
  <a href="site1.aspx"><img src="https://365csi.nl/6.png" /> </a>
  <a href="site2.aspx"><img src="https://365csi.nl/5.png" /></a>
  <a href="sites3.aspx"><img src="https://365csi.nl/c.png" /></a>
  <a href="site4.aspx"><img src="https://365csi.nl/s.png" /></a>
  <a href="site4.aspx"><img src="https://365csi.nl/i.png" /></a>
</div>

But.. when resizing the window.. with squares you will then run into the problem you can't calculate the height off the width. So you need to add some trickery to make an element always be square on resizing.

Now, I am no CSS wizard, we usually wack in loads of DIVs to get things working,
it became a personal challenge to get it working with your minimal HTML code

It took me some hours to get it right, and minimize the CSS to the core: (I had fun, always good to learn)

see JSFiddle: https://jsfiddle.net/dannye/5x1hunsh/

iCSS