I've had a google around and thought the two lines in bold would do it but they haven't:

.button-left, .button-right {
background-color:#f4f4f4;
color:#808080;
width:240px;
height:30px;
font-weight:bold;
float:left;
margin-bottom:5px;
margin-top:5px;
padding:0px;
text-decoration:none;
text-align:center;
display: table-cell;
vertical-align: middle;
}

Anyone know how to vertically align the text to the middle of a DIV?

Thanks

Nope.. vertical-align does not work the same way in CSS as it does in tables. It refers to the baseline of the text - not the middle of a div.

See the stickies on centering your website, it includes methods for vertical centering.