1

请帮忙，

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

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

请参阅此处的代码：

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>

4

2 回答 2

1

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

相反，我建议更改您的菜单样式以使用display: table/table-row/table-cell，因为表格非常擅长垂直对齐中间的东西。

您需要做的是将整个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代替）等（我上面所拥有的就是你应该拥有的）。

您还需要将实际背景样式从as 移动到lis ，因为as 的高度不再相等（但lis 会）。

于 2012-04-10T12:33:30.410 回答
-1

这是很好解释的五种方法：http: //blog.themeforest.net/tutorials/vertical-centering-with-css/

于 2013-07-26T10:00:56.020 回答