Centering different images on screen

Question

I have a problem with centering my images. What I want to achieve is this.

Like you can see I have 3 images at the top on the screen. These 3 images are in a div that is called "knoppen_boven". Beneath these images I have a puzzle image. Now at the moment I was able to look my site look like this.

Like you see the puzzle is nicely in the middle of the screen but the buttons aren't.

Here is my HTML

<div class="ui-grid-g-menu">
        <div class="knoppen_boven">
            <a href="~PROBE(248)~" class="btnKlant" data-transition="slide">
                <img src="images/btnklant.png" width="80" height="85" />
            </a>
            <a href="~PROBE(249)~" class="btnContact" data-transition="slide">
                <img src="images/btnContact.png" width="80" height="85" />
            </a>
            <a href="~PROBE(250)~" class="btnPlanning" data-transition="slide">
                <img src="images/btnPlanning.png" width="80" height="85" />
            </a>
        </div>
        <img src="images/img_puzzel.png" class="menu" width="150" height="150" />
    </div>

And here is my CSS

.knoppen_boven{

    margin:50px auto;
}
.btnContact {
    overflow: hidden;
    position:absolute;
    top: 110px;
    left: 30px;


}
.btnKlant {
    overflow: hidden;
    position:absolute;
    top: 110px;
    left:125px;

}
.btnPlanning {
    overflow: hidden;
    position:absolute;
    top:110px;
    left:220px;

}
img.menu {
    overflow: hidden;
    display:block;
    margin:90px auto;       
}

Answer 1

I think you are overcomplating it a little. Just set text-align: center to the knoppen_boven div and the images will center in the page (no need for absolute positioning).

 .knoppen_boven {
      text-align: center;
 }

Remember to remove all the absolute positions you have (in the three buttons) for the text-aling to work.