I'm trying to create a nav bar for my site with vertically centered links. I cannot figure out how to make the links vertically centered within the nav bar. Margin and padding only move the entire nav bar around, and the vertical-align item does nothing. i suspect it's a problem with the structure of my tags. Here's the offending code:

#nav {
	margin: 0px 20px 0px 20px;
	padding: 0px;
	border-bottom: 5px solid #ccc;
	border-left: 5px solid #ccc;
	border-right: 5px solid #ccc;
	background: #666666;
	height: 20px;
	}
#nav a {
	vertical-align:middle;
	color:#000000;
	font-family:"Trebuchet MS";
	font-size:14px;
	text-decoration:none;
	}
#nav a:hover {
	text-decoration:underline;
	}

Try playing around with your line height.

No, line height won't help me. I'm trying to center the text within the nav bar area, and there is only one line of text.

No, line height won't help me. I'm trying to center the text within the nav bar area...

Yes it will. I use line height to vertically center text within nav bars (in fact this is the main method I use). You must set the height of the nav bar to be equal to the line-height of the text that must be aligned vertically. That is it! If you use proportional fonts (which I usually recommend), be sure to set both line-height and height in em, not px.

Originally Posted by davidhowland14

No, line height won't help me. I'm trying to center the text within the nav bar area, and there is only one line of text.

It doesn't hurt to try. It would only take about 30 seconds...

vertical-align properties are only applied to inline elements within the same container.