Aligning scripts to middle problem

[varoluscu_prens]

Hi there;
I've faced a problem in CSS. Firstly,I want to give the HTML side which I want to style with CSS:

<ul id="upperMenu">
    	<li><a href="link1">Menu1</a></li>
	<li><a href="link2">Menu2</a></li>
	<li><a href="link3">Menu3</a></li>
	<li>
		<a href="link5">Menu4</a>
		<ul>
			<li><a href="#">Sub-Menu1</a></li>
			<li><a href="#">Sub-Menu2</a></li>
			<li><a href="#">Sub-Menu3</a></li>
			<li><a href="#">Sub-Menu4</a></li>
			<li><a href="#">Sub-Menu5</a></li>
			<<li><a href="#">Sub-Menu6</a></li>
		</ul>
	</li>		
	<li>
		<a href="link6">Menu5</a>
		<ul>
		<li><a href="#">Sub-Menu1</a></li>
		<li><a href="#">Sub-Menu2</a></li>
		<li><a href="#">Sub-Menu3</a></li>
		<li><a href="#">Sub-Menu4</a></li>		
		</ul>
	</li>			
	<li><a href="link7">Menu6</a></li>	
</ul>

Menu1,Menu2 etc.. are the upper menu of my web site.(like "Hardware&Software" , "Software development" section of the daniweb )Menu1,Menu2 etc.. appear in front of a gray background.But the texts (Say Menu1,Menu2,Menu3,Menu4,Menu5 and Menu6) appear at the top of the gray background.I want to see them in the middle of the gray section.In different words, I would like to set the text's vertical align middle. How can I do?
Here are the CSS section:

#upperMenu li:hover>* { 
	display:block
}
#upperMenu li:hover { 
	position:relative;
}
#upperMenu ul{
	position: absolute;
	left:-1px;
	top:98%;
	margin:0px;
	list-style:none;
	padding:0px;
	background-color:#000000;
	border-width:0.25px;
	border-style:solid;
	border-color:#999999;
	width:187px;
	padding:2px;
	z-index:70;
	display:none;
}
#upperMenu{
    position:absolute;
	margin:0px;
	list-style:none;
	padding:0px;
	background-color:#DCDCDC;
	vertical-align:top;
	display:block;
	font-size:0;
	left:23%;	/*left:210px;*/
	top:20.5%;
	width:76%;
	height:8%;
}
#upperMenu li{
	position:relative;
	display:block;
	/*zoom:1;*/
	margin:0;
	font-size:0;
	float:left;
	vertical-align:middle;  /*I was hoping that helps but it didn't.*/
	width:auto;
	text-align:center;
	background-color:#DCDCDC;
}
#upperMenu >li{
	margin-left:4%;
	
}
#upperMenu a, #upperMenu li.dis a:hover,#upperMenu li.sep a:hover{
	display:block;
	vertical-align:middle;
	background-color:#DCDCDC;
	border:0px solid #E6E6E6;
	text-align:left;
	text-decoration:none;
	padding:0.25em 0.5em;
	vertical-align:middle;
	font:normal 11px Lucida Sans Unicode,Lucida Grande,Verdana,Arial,Helvetica,sans-serif;
	color:#000000;
	cursor:default;
	width:auto;
}

Thanks in advance.

[jstfsklh211]

vertical align will only work with table cells
that being said you can set display: table-cell; on your links

[macneato]

Try adding the following:

#upperMenu li{
height:30px; /* define height */
line-height: 30px /* line-height that matches what was defined above*/
}