Ok so here goes, ive made myself a nice looking CSS button my text is centre aligned, however it wont seem to align to the midle of the whole box.

 

These are going to be my bottons for my small image gallery.

 

please help

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.buttonbox {
width:300px;
height:30px;
text-align:left;
}
.imagebutton {
width:20px;
height:30px;
background-color:#999999;
border:solid 1px #000000;
text-align:center;
float:left;
}
.imagebutton:hover {
width:20px;
height:30px;
background-color: #FF0066;
border:solid 1px #000000;
text-align:center;
float:left;
}
.link2 {
text-decoration:none;
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
.link2:hover {
text-decoration:none;
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>button</title>
</head>
<body>
<div class="buttonbox">
<a href="#" class="link2">
<div class="imagebutton">1</div>
</a><a href="#" class="link2">
<div class="imagebutton" style="margin-left:10px">2</div>
</a>
<a href="#" class="link2">
<div class="imagebutton" style="margin-left:10px">3</div>
</a>
<a href="#" class="link2">
<div class="imagebutton"style="margin-left:10px">4</div>
</a>
</div>
</body>
</html>

try to put

line-height:30px;

 

In the css from .imagebutton

Also I don't think its valid to put a <div> between <a> tags.

How can i make these buttons then?

Use <span> instead

The code incorporating the line-height: 30px; and using span instead of div inside the "a" tag would be:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.buttonbox {
width:300px;
height:30px;
text-align:left;
}
.imagebutton {
width:20px;		  line-height: 30px;
height:30px;
background-color:#999999;
border:solid 1px #000000;
text-align:center;
float:left;
}
.imagebutton:hover {
width:20px;
height:30px;
background-color: #FF0066;
border:solid 1px #000000;
text-align:center;
float:left;
}
.link2 {
text-decoration:none;
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
.link2:hover {
text-decoration:none;
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
</style>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>button</title>
</head>
<body>
<div class="buttonbox">
<a href="#" class="link2"><span class="imagebutton">1</span></a>
<a href="#" class="link2"><span class="imagebutton" style="margin-left:10px">2</span></a>
<a href="#" class="link2"><span class="imagebutton" style="margin-left:10px">3</span></a>
<a href="#" class="link2"><span class="imagebutton"style="margin-left:10px">4</span></a>
</div>
</body>
</html>