Question

Thats it really.

each image is a button, and I want them to all fit in the container equidistant

<div class="buttonImgContainer" >
      <span><img class="buttonImg servicesImg" src="Images/services.jpg" alt="" /></span>
      <span><img class="buttonImg galleryImg" src="Images/ProjectGallery.jpg" alt="" /></span>
      <span><img class="buttonImg estimateImg" src="Images/Estimate.jpg" alt=""/></span>
      <span><img class="buttonImg contactImg" src="Images/ContactUsSquare.png" alt=""/></span>
</div>

Answer 1

it turns out that I was quite close with my prior answer. This unequivocally does it:

.buttonImgContainer span {
    width: 25%;
    float: left;
}

span{
    text-align: center;
}

here’s a .jsFiddle for the solve.

In my case, I am using <span>s, which are inline. text-align: center; is badly named, as it will align images as well. That was the missing piece of the puzzle.. The name threw me off.

Each span is set to 25% of its parent <div>, which, in turn, I have made smaller than the page, showing the spans are keyed to that element.

in my fiddle, if you resize the columns, you will see the buttons move to their proper place in relation to the containing div, .buttonImgContainer.