导航菜单：css垂直居中

Question

我试图创建一个均匀间隔的导航菜单，无论菜单项是1行还是2行文本。 我有这个使用1行文本，但如果一个项目击中多行，文本的垂直间距是关闭的。

到目前为止，我的代码如下。 任何帮助都是极好的。 提前致谢。

jsfiddle： http ： //jsfiddle.net/wnfUC/

样式：

       #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><a href="/Services">Services</a></li>
<li><a href="/Services/Analysis">Analysis</a></li>
<li><a href="/Services/Strategic-Planning">Strategic Planning</a></li>
<li><a href="/Services/International-Market-and-Competitor-Research">International Market and Competitor Research</a></li>
<li><a href="/Services/Budgeting-and-Forecasting">Budgeting and Forecasting</a></li>
<li><a href="/Services/International-Cultural-Liaison" class="NavigationSelected">International Cultural Liaison</a></li>
</ul>
</div>

Answer 1

你可以使用CSS表格布局（不是HTML表格元素，呃！）来实现这个目的： http ： //jsfiddle.net/PhilippeVay/ZszJm/

ul使用与表相同的算法显示，链接使用与单元格相同的算法，此处li显示为行，因为它是垂直的。 然后您可以根据需要使用vertical-align :)（在您的情况下为middle值）
您可以添加table-layout: fixed to ul ，然后浏览器将使用其他算法来显示表格，不会尝试将单元格的宽度和高度调整为其内容，但会坚持CSS规则所说的内容。

兼容性：IE8及以上版本。 它不会集中在IE7和6中，不是什么大不了的事。

编辑：使用此方法，您无需事先知道哪些项目比其他项目更长。 浏览器会想到这一点。

Answer 2

文本的垂直对齐通常使用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;    
}

请注意，我将类two-line添加到跨越两行的锚元素。

Answer 3

您可以使用此方法： http ： //css-tricks.com/vertically-center-multi-lined-text/

您还可以使用其他一些方法，但它们需要额外的HTML标记，而这一方法却没有。