Vertical center text in a block element with set height

**Force Flow** · Jun 16, 2012 19:09

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>

**chris.upjohn** · Jun 16, 2012 21:00

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.

http://jsfiddle.net/chrisupjohn/ZmNBk/

**Force Flow** · Jun 16, 2012 21:21

That doesn't quite work in this case.

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

**Force Flow** · Jun 17, 2012 00:21

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?

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

**chris.upjohn** · Jun 17, 2012 05:44

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

**Force Flow** · Jun 17, 2012 14:58

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

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*/
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>

**ralph.m** · Jun 17, 2012 15:52

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

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*/
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;
	display: table;
	text-align: center;
	overflow: hidden;
	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>

**Force Flow** · Jun 17, 2012 17:17

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

**ralph.m** · Jun 17, 2012 17:44

Originally Posted by Force Flow

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.

)

**Force Flow** · Jun 17, 2012 18:09

Originally Posted by ralph.m

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.

)

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

**ralph.m** · Jun 17, 2012 18:18

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:

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*/
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>

**Force Flow** · Jun 17, 2012 19:05

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

**ralph.m** · Jun 17, 2012 19:24

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

User Tag List

Thread: Vertical center text in a block element with set height

Thread Tools

Display

Vertical center text in a block element with set height

Bookmarks

Bookmarks

Posting Permissions