HTML5 和 CSS 3 - Div 文本垂直居中对齐

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 a s to the li s since the a s won't be equal in height any more (but the li s will).

Answer 2

Here is five methods very well explained: http://blog.themeforest.net/tutorials/vertical-centering-with-css/