I've been trying to centre align some DIV tags all morning and I cant get it to work the way I want. I've done heaps of googling and I can get it to centre align if I just use one box, but I want to float 4 different boxes next to each other so as soon as I add the float line to the CSS it left aligns again.

Does anyone know how i can fix this?

The CSS without the float:

.HomeHoverButtonBox {
 margin: 0px auto;
 width: 150px;
 border: 1px solid #FFFFFF;
}

And With:

.HomeHoverButtonBox {
 margin: 0px auto;
 width: 150px;
 border: 1px solid #FFFFFF;
 float: left;
}