Why doesn't vertical-align work in this code?

ok, here's my code body code....

Code:
<div style="width:100%; height:100%; text-align:center;">
    <divstyle="background:url(images/banner.png) no-repeat; width:762px; height:43px; text-align:right; vertical-align:middle;">
		   <span id="home" class="menu" onmouseover="this.className='menu2';" onmouseout="this.className='menu';">home</span>
			 <span id="stats" class="menu" onmouseover="this.className='menu2';" onmouseout="this.className='menu';">stats</span>
			 <span id="telephone" class="menu" onmouseover="this.className='menu2';" onmouseout="this.className='menu';">telephone</span>
			 <span id="email" class="menu" onmouseover="this.className='menu2';" onmouseout="this.className='menu';">email</span>
			 <span id="help" class="menu" onmouseover="this.className='menu2';" onmouseout="this.className='menu';">help</span>
		  </div>
		<div style="background-color:#FFFFFF; width:762px; height:80%;"></div>
		<div style="background-color:#949e73; width:762px; height:43px;"></div>
	 </div>
and heres the css...

Code:
body,table {font-family:arial; 
					 font-size:7pt;}
			body {background-color:#000000;
					 color:#000000;}
			.menu {color:#000000; 
						width:69px; 
						height:14px;  
						text-align:center;
						cursor:pointer;} 
			.menu2 {color:#000000;
						font-weight:bold;
						width:69px; 
						height:14px;  
						text-align:center;
						cursor:pointer;
						border:1px solid #8CAE00;}