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?

<!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>

The easiest way i know of doing it is with display: table and display: table-cell as they allow you to use some of the the properties normally used for tables only. See the following link for a small demo i put together using no extra elements.

That doesn’t quite work in this case.

The anchors are block elements. I’m trying to vertically center the text inside the anchor.

Looks like the table-cell was actually the way to go, once I moved those rules to the correct elements. I eventually got it so that the li width worked properly, the tabs worked properly, and the vertical centering worked properly.

Is there a better way to do this, or is this pretty much the only way to go?

<!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 {
    display: table;
    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 a, #nav ul li a:hover {
    display: table-cell;
    text-align:center;
    vertical-align:middle;
    text-decoration: none !important;
    color: #B7B7B7;
    font-weight: bold;
    font-size: 1em;
    overflow:hidden;
    height: 75px;
}
#nav ul li:hover, #nav ul li.selected{
    background:yellow;
}
#nav ul li a:hover, #nav ul li.selected a{
    position:relative;
    top:-1px;
    color: #8B8B8B; 
    border-top:1px solid yellow;
    padding-top:1px;
    height:73px; /* li height - (a border + a padding) */
}
#nav ul li, #nav ul li a {
    -moz-border-radius: 0px 0px 5px 5px; 
    -webkit-border-radius: 0px 0px 5px 5px;
    border-radius: 0px 0px 5px 5px;
}


</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 class="selected"><a href="">This is a mighty test with line</a></li>
            <li><a href="">smallish test</a></li>
            <li><a href="">bigger testaroonie</a></li>
            <li><a href="">test</a></li>
            <li><a href="">test test</a></li>
        </ul>
    </div>

</div>

<div id="sectioncontent">
</div>

<div id="sectionfooter">

</div>

</body>
</html>

This is pretty much the only way i know how to vertically align text with extra markup and JavaScript

ok, I encountered a new issue when attempting to use this method of vertical centering. I can’t seem to horizontally center the list.

<!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*/
body, div, span, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, button, p, blockquote, table, th, td { margin:0px; padding:0px; }
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100.01%;
	color: black;
	background-color: #f9f9f9;
}
/* --clearfix hack-- */
.clearfix:after {
	content:" ";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.clearfix { display:inline-block; }

/* mac hide \\*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide */
/* --end clearfix hack-- */
/*reset*/

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


/* start nav buttons */
#breadcrumbs {
	background: blue;
	color:black;
	padding: .2em .5em .2em .5em;
}

#sectionnav{
	background:green;
	padding-bottom:.8em;
}

ul#branchtabs, ul#branchtabs li {
	padding:0;
	margin:0;
}
ul#branchtabs {
	border-top:1px solid black;
}
ul#branchtabs li {
	display: table;
	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;	

}
ul#branchtabs li {
	/*left:20%;
	position:relative;*/
}
ul#branchtabs li a, ul#branchtabs li a:hover {
	display: table-cell;
	text-align:center;
	vertical-align:middle;
	text-decoration: none !important;
	color: black;
	font-weight: bold;
	font-size: 1em;
	overflow:hidden;
	height: 75px;
}
ul#branchtabs li:hover, ul#branchtabs li.selected{
	background:blue;
}
ul#branchtabs li a:hover, ul#branchtabs li.selected a{
	position:relative;
	top:-1px;
	color: white; 
	border-top:1px solid blue;
	padding-top:1px;
	height:73px; /* li height - (a border + a padding) */
}
ul#branchtabs li, ul#branchtabs li a {
	-moz-border-radius: 0px 0px 5px 5px; 
	-webkit-border-radius: 0px 0px 5px 5px;
	border-radius: 0px 0px 5px 5px;
}
/* end nav buttons */


</style>

</head>
<body>

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



<div id="contentcontainer">
	
	<div id="sectionnav" class="clearfix">
		<div id="breadcrumbs">Home &raquo; Page1</div>
		<ul id="branchtabs">
			<li class="selected"><a href="">This is a test line</a></li>
			<li><a href="">test line</a></li>
			<li><a href="">test line two</a></li>
			<li><a href="">test line</a></li>
			<li><a href="">yet another test line</a></li>
		</ul>
	</div>
	
	<div id="contentcontainer-right">
		<div id="contentcontainer-content">
			<div id="content">
				<div id="content-inner">
					
					content text
				</div>
			</div>
			<div id="right">
				<div id="right-inner">
					
					sidebar text
				</div>
			</div>
		</div>
	</div>
	

	
	<div id="footer">
		footer text
	</div>
</div>



</body>
</html>

Don’t know if this is a very good solution, but here’s my take:


<!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*/
body, div, span, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, button, p, blockquote, table, th, td { margin:0px; padding:0px; }
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100.01%;
	color: black;
	background-color: #f9f9f9;
}
/* --clearfix hack-- */
.clearfix:after {
	content:" ";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.clearfix { display:inline-block; }

/* mac hide \\*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide */
/* --end clearfix hack-- */
/*reset*/

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


/* start nav buttons */
#breadcrumbs {
	background: blue;
	color:black;
	padding: .2em .5em .2em .5em;
}

#sectionnav{
	background:green;
	padding-bottom:.8em;
}

ul#branchtabs, ul#branchtabs li {
	padding:0;
	margin:0;
}
ul#branchtabs {
	border-top:1px solid black;
	[COLOR="#FF0000"]display: table;
	text-align: center;
	overflow: hidden;
	margin: 0 auto;[/COLOR]
}
ul#branchtabs li {
	display: table;
	float:left;
	list-style: none outside none;
	[COLOR="#FF0000"]width:17%;[/COLOR]
	margin: 0 .6em 0 .6em;
	border-bottom:1px solid black;
	border-left:1px solid black;
	border-right:1px solid black;	

}
ul#branchtabs li {
	/*left:20%;
	position:relative;*/
}
ul#branchtabs li a, ul#branchtabs li a:hover {
	display: table-cell;
	text-align:center;
	vertical-align:middle;
	text-decoration: none !important;
	color: black;
	font-weight: bold;
	font-size: 1em;
	overflow:hidden;
	height: 75px;
}
ul#branchtabs li:hover, ul#branchtabs li.selected{
	background:blue;
}
ul#branchtabs li a:hover, ul#branchtabs li.selected a{
	position:relative;
	top:-1px;
	color: white; 
	border-top:1px solid blue;
	padding-top:1px;
	height:73px; /* li height - (a border + a padding) */
}
ul#branchtabs li, ul#branchtabs li a {
	-moz-border-radius: 0px 0px 5px 5px; 
	-webkit-border-radius: 0px 0px 5px 5px;
	border-radius: 0px 0px 5px 5px;
}




/* end nav buttons */


</style>

</head>
<body>

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



<div id="contentcontainer">
	
	<div id="sectionnav" class="clearfix">
		<div id="breadcrumbs">Home &raquo; Page1</div>
		<ul id="branchtabs">
			<li class="selected"><a href="">This is a test line</a></li>
			<li><a href="">test line</a></li>
			<li><a href="">test line two</a></li>
			<li><a href="">test line</a></li>
			<li><a href="">yet another test line</a></li>
		</ul>
	</div>
	
	<div id="contentcontainer-right">
		<div id="contentcontainer-content">
			<div id="content">
				<div id="content-inner">
					
					content text
				</div>
			</div>
			<div id="right">
				<div id="right-inner">
					
					sidebar text
				</div>
			</div>
		</div>
	</div>
	

	
	<div id="footer">
		footer text
	</div>
</div>



</body>
</html>

The border-top of the ul doesn’t stretch to 100% using that method.

If I set border-bottom of the #breadcrumbs instead, the li tabs don’t cover #breadcrumbs border-bottom with a:hover

Yeah, that’s what I would do. Just remove the overflow:hidden from the ul, which isn’t needed anyway. (I should have removed it. It just made testing easier. :slight_smile: )

Am I missing something? If I put a border-bottom on #breadcrumbs, the li doesn’t cover it.

This is what I posted above, but with overflow: hidden removed from the ul and the border on breadcrumbs. The breadcrumb border is hidden when the li is selected or hovered:


<!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*/
body, div, span, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, button, p, blockquote, table, th, td { margin:0px; padding:0px; }
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100.01%;
	color: black;
	background-color: #f9f9f9;
}
/* --clearfix hack-- */
.clearfix:after {
	content:" ";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.clearfix { display:inline-block; }

/* mac hide \\*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide */
/* --end clearfix hack-- */
/*reset*/

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


/* start nav buttons */
#breadcrumbs {
	background: blue;
	color:black;
	padding: .2em .5em .2em .5em;
	border-bottom:1px solid black;
}

#sectionnav{
	background:green;
	padding-bottom:.8em;
}

ul#branchtabs, ul#branchtabs li {
	padding:0;
	margin:0;
}
ul#branchtabs {
	display: table;
	text-align: center;
	margin: 0 auto;
}
ul#branchtabs li {
	display: table;
	float:left;
	list-style: none outside none;
	width:17%;
	margin: 0 .6em 0 .6em;
	border-bottom:1px solid black;
	border-left:1px solid black;
	border-right:1px solid black;	

}
ul#branchtabs li {
	/*left:20%;
	position:relative;*/
}
ul#branchtabs li a, ul#branchtabs li a:hover {
	display: table-cell;
	text-align:center;
	vertical-align:middle;
	text-decoration: none !important;
	color: black;
	font-weight: bold;
	font-size: 1em;
	overflow:hidden;
	height: 75px;
}
ul#branchtabs li:hover, ul#branchtabs li.selected{
	background:blue;
}
ul#branchtabs li a:hover, ul#branchtabs li.selected a{
	position:relative;
	top:-1px;
	color: white; 
	border-top:1px solid blue;
	padding-top:1px;
	height:73px; /* li height - (a border + a padding) */
}
ul#branchtabs li, ul#branchtabs li a {
	-moz-border-radius: 0px 0px 5px 5px; 
	-webkit-border-radius: 0px 0px 5px 5px;
	border-radius: 0px 0px 5px 5px;
}




/* end nav buttons */


</style>

</head>
<body>

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



<div id="contentcontainer">
	
	<div id="sectionnav" class="clearfix">
		<div id="breadcrumbs">Home &raquo; Page1</div>
		<ul id="branchtabs">
			<li class="selected"><a href="">This is a test line</a></li>
			<li><a href="">test line</a></li>
			<li><a href="">test line two</a></li>
			<li><a href="">test line</a></li>
			<li><a href="">yet another test line</a></li>
		</ul>
	</div>
	
	<div id="contentcontainer-right">
		<div id="contentcontainer-content">
			<div id="content">
				<div id="content-inner">
					
					content text
				</div>
			</div>
			<div id="right">
				<div id="right-inner">
					
					sidebar text
				</div>
			</div>
		</div>
	</div>
	

	
	<div id="footer">
		footer text
	</div>
</div>



</body>
</html>

Ah, I did miss something.

There is a overflow:hidden for the anchor and the ul. I was looking at the one in the anchor instead.

It looks like your suggestion did the trick. Thanks :slight_smile:

You’re welcome. I’m not sure if it’s the best way, but still, it’s nice to find something that works. :slight_smile: