Vertically align links in nav bars?

ohallost · February 24, 2010, 12:30am

Hi, I want my nav bars to have the links vertically aligned but can’t get it to work.

I have both a horizontal and vertical navigation bar with blocks of specific heights, and I want the link text to be vertically-aligned in the center/middle. I can’t use padding I guess because in Firefox padding is added to the size of the block and in IE it is not, and the nav elements have to remain the same size to fit around an image (image height 150px)…

How do I vertically align text in a horizontal navigation bar? and in a vertical navigation bar? Note that I am using the “float” property rather than “inline” because I want the horizontal bar blocks to be the same width.

THANK YOU!!!

Here’s the code I’m working with…
Horizontal Nav Bar:

Vertical Nav Bar:
<style type=“text/css”><!–
a.button:link,a.button:visited
{
display:block;
width:150px;
height:61px;
vertical-align:middle;
font-weight:bold;
font-size:12px;
color:#FFFFFF;
background-color:#AA0066;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}
a.button:hover,a.button:active
{
background-color:#EEAA11;
border-width=1px;
border-style=solid;
border-color=#d9d9d9;
}
div.utilitynav
{
width:150px;
padding:0px;
border:0px;
margin:0px;
float:left;
}
.clear
{
clear:both;
}

Rayzur · February 24, 2010, 1:00am

How do I vertically align text in a horizontal navigation bar? and in a vertical navigation bar? Note that I am using the “float” property rather than “inline” because I want the horizontal bar blocks to be the same width.

Hi ohallost, Welcome to SitePoint!

The same basic principle will apply to your list items whether it is a vertical or horizontal menu so that is not the issue at hand.

Vertical-centering with css can be kinda tricky until you understand the limitations of the vertical-align property. It only applies to tables, display:table, and inline elements (including inline-block).

Now there are limitations with display:table since IE6/7 does not support it. But you can use the relative offset method for those browsers and feed display:table to good browsers.
Here is an example of the display:table method.

Next, you can use inline:block; with some other rules to bring IE6/7 into compliance since they don’t have native support for inline-block. It is possible to make them behave though. It requires some extra nested elements to make it happen but that is the case with the other method also.
Here is an example of the inline-block method.

View the page source on those demos and see if you can see what’s going on and feel free to post back if you have any questions.

ohallost · February 24, 2010, 3:45am

Thanks so much! I tried the display: table and it worked for firefox, but not IE, as you said. How do I add relative offset for IE?

Also, I have both nav bars on one page, and when I made these additions, it pushed the horizontal nav bar links further down in the bar, so that some text disappeared and it was no longer vertically centered. I’ll keep looking for the cause but thought I’d mention it in case you’d know why one might affect the other and how to prevent that.

Thank you so much for your help! I frequented this site a few years back, and when I ran into some coding problems again lately I remembered it was a terrific resource. I really appreciate it!

RyanReese · February 24, 2010, 4:00am

http://www.pmob.co.uk/temp/vertical-align3.htm

I call it a double relative shift (whatever lol :)), look inside the conditional comments to find out how.

Basically you work off an IE bug and set top:50%; and then bring the child to -50% thus perfect vertical aligning to the pixel

Rayzur · February 24, 2010, 4:02am

Hi,
It would really help if you could post a link to the page. Since you are a new member you will not be able to post links until you have made five posts. However you can just leave out the http:// stuff and it will work. We can paste into our browser from there.

How do I add relative offset for IE?

The code below is from the first link I gave. The position:relative; on the .outer and .outer span are for IE. Then the 50%/-50% offset takes place in the IE Conditional Comment.

[COLOR=DarkGreen][B].outer[/B][/COLOR]{
    [COLOR=Blue]position:relative;[/COLOR]
    display:table;
    width:11em;
    height:4em;
    vertical-align:middle;
}
[COLOR=Blue][B][COLOR=DarkGreen].outer [/COLOR]span[/B][/COLOR] {
    [COLOR=Blue]position:relative;[/COLOR]
    display:table-cell;
    padding:0 1em;    
    vertical-align:middle;
}
h1{padding:20px;}
</style>
[COLOR=DarkGreen]<!--[if lt IE 8]>[/COLOR]
<style type="text/css">
.outer,.outer span {display:block; height:auto;}
[COLOR=DarkGreen][B].outer[/B][/COLOR] [COLOR=Blue]{top:50%;}[/COLOR]
[B][COLOR=DarkGreen].outer[/COLOR] [COLOR=Blue]span[/COLOR] [/B][COLOR=Blue]{top:-50%;}[/COLOR]

* html ul {height:1%; overflow:visible}/*overflow reset and haslayout the ul for IE6*/
* html li {display:inline;}/*fix the dbl margin bug*/
</style>
[COLOR=DarkGreen]<![endif]-->[/COLOR]
</head>
<body>
<h1>Vertical Aligning Text within Lists Items</h1>
    
    <ul>
        <li><a href="#">
            [COLOR=DarkGreen]<span class="outer">[/COLOR]
                [COLOR=Blue]<span>[/COLOR]test text[COLOR=Blue]</span>[/COLOR]
            [COLOR=DarkGreen]</span>[/COLOR]</a>
        </li>

ohallost · February 24, 2010, 5:27am

Thank you both!

I am still having problems. The green horizontal nav is pushed down for some reason. And my CMS keeps changing the comment code, so in IE a weird [end if] is displaying above both.

Here is a link to a test page. tinyurl.com/ycndpdu

Any ideas…? Thank you again sooo much!!!

Rayzur · February 24, 2010, 5:55am

And my CMS keeps changing the comment code, so in IE a weird [end if] is displaying above both.
Hi,
The problem there is that you did not close your comment correctly. You have two hyphens after the ! and there should be none.

<!–[endif]–>

It should be like this

<![endif]–>

You are also putting your internal stylesheets in the body element, they belong in the head of the page. This is not like javascript where you can place scripts inside the page.

Run your page through the W3C Validator and let it point out your errors.

Here is your green nav working correctly by itself

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>nav demo</title>

<style type="text/css">

body {
    background: #fff;
    font-size:100%;
}
ul.main {
    list-style:none;
    margin:0;
    margin-top:5px;
    padding:0;
    overflow:hidden;
}
li{float:left;}

a.mainnav:link,a.mainnav:visited {
    float:left;
    width:100px;
    height:38px;
    font-size:12px;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#7fbb00;
    text-align:center;
    padding-top:0px;
    text-decoration:none;
    text-transform:uppercase;
}
a.mainnav:hover,a.mainnav:active {
    background-color:#EEAA11;
}
.outer{
    position:relative;
    display:table;
    width:100px;
    height:38px;
    vertical-align:middle;
}
.outer span {
    position:relative;
    display:table-cell;
    padding:0;    
    vertical-align:middle;
}
</style>

<!--[if lt IE 8]>
<style type="text/css">
.outer,.outer span {display:block; height:auto;}
.outer {top:50%;}
.outer span {top:-50%;}
* html ul.main {height:1%; overflow:visible}/*overflow reset and haslayout the ul for IE6*/
</style>
<![endif]-->

</head>
<body>

<div id="wrapper">
<ul class="main">
    <li><a class="mainnav" href="PageServer?pagename=walk_about"><span class="outer"><span>About the Walk</span></span></a></li>
    <li><a class="mainnav" href="PageServer?pagename=walk_info"><span class="outer"><span>Event Details</span></span></a></li>
    <li><a class="mainnav" href="PageServer?pagename=walk_heartandsole"><span class="outer"><span>Heart &amp; Sole Circle</span></span></a></li>
    <li><a class="mainnav" href="PageServer?pagename=walk_teamleaders"><span class="outer"><span>Teams</span></span></a></li>
    <li><a class="mainnav" href="PageServer?pagename=volunteer"><span class="outer"><span>Volunteers</span></span></a></li>
    <li><a class="mainnav" href="PageServer?pagename=walk_participanttools"><span class="outer"><span>Participant Tools</span></span></a></li>
</ul>
</div>

</body>
</html>

ohallost · February 24, 2010, 2:18pm

Thanks again. Yes I noticed the extra dashes in the comment; the CMS is adding those when I click save. I’ll keep trying. Thanks so much for looking at my code an helping!