Question

Please help,

i want to align the header menu/nav links to vertically align. See:

http://hyindia.com/demo/myoffshore/index.html

See the CODE here:

nav ul { list-style-type:none; padding:0px; margin:0px; float:left; width:100%;}
nav ul li { float:left; width:119px; height:66px;}
nav ul li a { 
 float:left;
 width:119px;
 height:66px;
 font:bold 15px 'Myriad Pro';
 color:#fff;
 text-shadow:1px 1px #1f1f1f;
 text-align:center;
}

<nav>
<ul>
    <li><a href="#" class="nav1">HOME</a></li>
    <li><a href="#" class="nav2">HEALTH INSURANCE</a></li>
    <li><a href="#" class="nav3">LIFE INSURANCE</a></li>
    <li><a href="#" class="nav4">OVERSEAS MORTGAGES</a></li>
    <li><a href="#" class="nav5">ESTATE PLANNING</a></li>
    <li><a href="#" class="nav6">BANKING</a></li>
    <li><a href="#" class="nav7">WEALTH MANAGEMENT</a></li>
    <li><a href="#" class="nav8">QROPS</a></li>
</ul>

Answer 1

Since some of your nav items have text spanning several rows you won’t be able to use the classic line-height-trick (which would be to set the line-height equal to the height).

Instead I’d suggest changing your menu styling to use display: table/table-row/table-cell since tables are excellent at vertically aligning things in the middle.

What you need to do is to change your entire nav styling to this:

nav {
    display: table;
    width: 100%;
}

    nav ul {
        display: table-row;
        list-style: none;
        padding: 0;
        margin: 0;
    }

        nav ul li {
            display: table-cell;
            vertical-align: middle;
        }

            nav ul li a {
                display: block;
                padding: 5px 10px;
            }

Remove all the floats and widths + heights (using padding on the a instead) etc (what I have above is all you should have).

You’ll also need to move the actual background styling from the as to the lis since the as won’t be equal in height any more (but the lis will).