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

请帮忙

我想将标题菜单/导航链接对齐以垂直对齐。见：

请参见此处的代码：

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>

nav ul{列表样式类型：无；填充：0px；边距：0px；浮点：左；宽度：100%；}
导航ulli{浮动：左；宽度：119px；高度：66px；}
nav ul li a{
浮动：左；
宽度：119px；
高度：66px；
字体：粗体15px‘Myriad Pro’；
颜色：#fff；
文本阴影：1px 1px#1f；
文本对齐：居中；
}

---

由于某些导航项目的文本跨越多行，您将无法使用经典的行高技巧（即将行高设置为高度）

我建议更改菜单样式，使用<代码>显示：表/表行/表单元格< /C> >，因为表在中间垂直对齐时非常出色。

您需要做的是将整个

nav

样式更改为：

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;
            }

删除所有浮动和宽度+高度（改为使用

a

上的填充）等（我上面的内容是您应该拥有的全部内容）

---

您还需要将实际的背景样式从

a

s移动到

li

s，因为

a

s的高度将不再相等（但是

li

s将如此）。

这里有五种方法解释得非常清楚：

这很模糊，您在谈论哪一种？一个已经对齐了…：/@Sonu，Tom是对的，有一个已经垂直对齐了。对不起，伙计们，我忘了添加单词middle。我希望顶部菜单/导航（彩色）链接垂直居中对齐！非常感谢您的代码和关于css“powerbuoy”的小教程。这不是HTML5或CSS3。那么呢P此外，

nav

元素是HTML5（）<代码>显示：表很旧，但新支持。