css alignment problem

[hojoff79]

I am having trouble getting an unordered list to align properly within a css div tag. I have a tag that's 900px wide and 50px high, but the unordered list always appears at the very bottom of the div (even when I do things like increase padding or verticle-align or anything). Can someone tell me what is the best way to center this VERTICALLY! Here is some of the code...

Here is the css with the div tag and the css applied to the list:

#navbar{
width:870px;
height:20px;
padding:15px;
background:#FFCC00;
margin-left:auto;
margin-right:auto;
vertical-align:middle;
}

#navbar ul li{
display:inline;
}

#navbar ul li:after{
content: "|";
margin-left:10px;
margin-right:10px;
}

#navbar ul li.last:after{
content: "";
}

Here is the html in case anyone things there is a problem there

<div id="navbar">
<ul>
	<li>Home</li>
	<li>Link 1</li>
	<li>Link 2</li>
	<li>Link 3</li>
	<li>Link 4</li>
	<li class="last">Link 5</li>
</ul>
</div>

Thanks for your help.