Vertically centring text in a div made from a li

Would someone please be able to tell me how I can vertically align the text on the navigation buttons on the follow site I’m trying to develop?

[url=http://atlantis.plastiqueweb.com/2005-6/]http://atlantis.plastiqueweb.com/2005-6/[/url]

The HTML code of the part in question is:

[code] <div id=”left_column”>

<div id=”navigation-container”>
<ul>
<li><a href=”#”>Announcements</a></li>
<li><a href=”#”>Tracking</a></li>
<li><a href=”#”>Mixing</a></li>
<li><a href=”#”>Mastering</a></li>
</ul>

</div>
</div>[/code]

and part of the CSS code:

[code]#left_column {
width: 170px;
}
#navigation-container {
width: 170px;
float: left;
}
#navigation-container ul {
margin: 0;
padding: 0;
list-style-type: none;
text-indent: 24px;
font-weight: bold;
}
#navigation-container a {
width: 170px;
height: 23px;
display: block;
}
#navigation-container a:link, #navigation-container a:visited {
background: #EBEAE8 url(../images/layout/navigation_button.png) no-repeat;
color: #303030;
text-decoration: none;
}
#navigation-container a:hover, #navigation-container a:active {
background: #EBEAE8 url(../images/layout/navigation_button-rollover.png) no-repeat;
color: #303030;
text-decoration: none;
}[/code]

I’ve already tried all sorts of margins and paddings in the CSS, but it always spaces the buttons apart too. And vertical-align: middle doesn’t work either.

Can anyone help?

Also in #HTML _↴