I always have trouble with vertical alignment. What I have here is a set of CSS tabs which can have a single or multiple lines of text. So, the line-height technique won't work here. What might be the best approach?

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link rel="stylesheet" href="reset.css?v=1.0" type="text/css">
<style type="text/css">
/* reset stylesheet */
body {
	margin:0;
	padding:0;
	font-size:100.0%;	
}
/* end reset */

body {
	background: #fffff;
	/*min-width:1002px;*/
}



#breadcrumbs {
	background: yellow;
	color:black;
	padding: .2em .5em .2em .5em;
}

#nav ul, #nav ul li {
	padding:0;
	margin:0;

}
#nav ul {
	border-top:1px solid gray;
}
#nav ul li {
	float:left;
	list-style: none outside none;
	width:10%;
	margin: 0 .6em 0 .6em;
	border-bottom:1px solid black;
	border-left:1px solid black;
	border-right:1px solid black;
	
}
#nav ul li, #nav ul li a {
	border-radius: 0px 0px 5px 5px; 
	-moz-border-radius: 0px 0px 5px 5px; 
	-webkit-border-radius: 0px 0px 5px 5px;
}
#nav ul li a, #nav ul li a:hover {
	display:block;
	text-align:center;
	text-decoration: none !important;
	color: #B7B7B7;
	font-weight: bold;
	font-size: 1.2em;
	overflow:hidden;
	height: 75px;
	vertical-align:middle;
}
#nav ul li a:hover, #nav ul li a.selected {
	margin-top:-1px;
	color: #8B8B8B; 
	background:yellow;
	border-top:1px solid yellow;
}


</style>

</head>
<body>

<div id="sectionheader">
	<div id="announcement"></div>
	<div id="logo"></div>
	<div id="logosplash"></div>
</div>

<div id="sectionnav">
	<div id="breadcrumbs">Home &raquo; Page1</div>
	<div id="nav">
		<ul id="branchtabs">
			<li><a href="">This Best Tab Here Here</a></li>
			<li><a href="">Tab</a></li>
			<li><a href="">This Tab Here</a></li>
			<li><a href="">This Tab Here</a></li>
			<li><a href="">This Tab Here</a></li>
		</ul>
	</div>

</div>

<div id="sectioncontent">

</div>

<div id="sectionfooter">


</div>

</body>
</html>