Vertical center text in a block element with set height
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 » 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>
