Navigation Menu: css vertical centering - html

Question

I am trying to create a navigation menu that is evenly spaced regardless if the menu item is 1 line or 2 lines of text. I have this working with 1 line of text but the vertical spacing of the text is off if an item hits more than one line.
My code that I have so far is below. Any help would be awesome. Thanks in advance.
jsfiddle: http://jsfiddle.net/wnfUC/
Style:
#pageNavigation {
background-image: url('../Images/TIBC_Base/nav-bg.png');
background-repeat: repeat-y;
margin:5px 0;
padding:5px 15px 5px;
min-height:125px;
}
#pageNavigation_bottom
{
clear:both;
background-image: url('../Images/TIBC_Base/nav-bg_bottom.png');
background-repeat: no-repeat;
margin:-5px 0 0 -1px;
min-height:8px;
}
#pageNavigation .navContent{ width:240px; margin:0 -10px; }
#pageNavigation ul { list-style-type: none; margin:0; padding:0; }
#pageNavigation ul li { display: block; height:57px; border-top:0px #E1E1E1 solid; border-bottom:1px #E1E1E1 solid; text-align:center; overflow:hidden; }
#pageNavigation a {
color:#485963;
font-size:16px;
text-decoration:none;
text-shadow: 0px -1px #EEEEEE;
display:block;
height:57px;
}
#pageNavigation a:hover
{
background: #FAE2AD;
color: #485963;
}
#pageNavigation a.NavigationSelected
{
color:#F9F9F9;
background: #A5B5BE;
text-shadow: 1px 1px #485963;
font-weight: normal;
}
HTML
<div id="pageNavigation">
<ul class="navContent">
<li>Services</li>
<li>Analysis</li>
<li>Strategic Planning</li>
<li>International Market and Competitor Research</li>
<li>Budgeting and Forecasting</li>
<li>International Cultural Liaison</li>
</ul>
</div>

Answer 1

You can use CSS table layout (not HTML table element, eh!) to achieve this: http://jsfiddle.net/PhilippeVay/ZszJm/
ul is displayed with the same algorithm as a table, links with the same algorithm than cells and here li are displayed as rows as it's vertical. And then you can play with vertical-align as much as you want :) (in your case middle value)
You can add table-layout: fixed to ul and then browsers will use the other algorithm for displaying tables, the one that doesn't try to adapt widths and heights of cells to their content but will stick to what CSS rules say.
Compatibility: IE8 and above. It won't be centered in IE7 and 6, not a big deal.
EDIT: with this method, you don't need to know in advance which items are longer than others. Browsers will figure that.

Answer 2

Vertical alignment of text is generally accomplished using line-height: http://jsfiddle.net/Shmiddty/wnfUC/1/
#pageNavigation a {
...
height:57px;
line-height:57px;
}
#pageNavigation a.two-line{
line-height:20px;
padding-top:10px;
}
Note that I added the class two-line to the anchor element that spanned two lines.

Answer 3

You could use this method: http://css-tricks.com/vertically-center-multi-lined-text/
There are also some other methods you could use, but they require extra HTML markup, which this one does not.