i'm using css to put text on top of image to make button, but i can't align the text exactly in the middle vertically or horisontally

what i have:

--------
|   text |
|          |
|______|

what i want:

--------
|          |
|  text  |
|______|

source:

code:

---

    #menu {
    width: 70%;
    height: 25px;
    border-bottom: 1px none #5b5b5b;
    padding-left: 25px;
    }
   
    #menu li {
    display: inline;
    }
   
    #menu a {
    width: 70px;
    height: 25px;
    background-image:url('button1.jpg');
    text-align: center;
    font-family: Arial;
    font-style: bold;
    color: white;
    display: block;
    float: left;
    font-size: 15px;
    padding:0 2px 0 2px;
    background-repeat: no-repeat;
    }
   
    #menu a:hover {
    width: 70px;
    height: 25px;
    background-image:url('button2.jpg');
    background-repeat: no-repeat;
    text-align: center;
    font-family: Arial;
    font-style: bold;
    color: white;
    display: block;
    float: left;
    font-size: 15px;
    padding:0 2px 0 2px;
    }

---

code:

---

<div id="menu" align="center">
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
</div>

---

vertical-align:middle; should work
http://www.w3schools.com/css/pr_pos_vertical-align.asp

text-align: center;
vertical-align: middle;
in '#menu a'

BTW: in '#menu a:hover', you don't need to repeat everything in '#menu a' that doesn't change.