Question

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

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

的风格： 的

       #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添加到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标记，而这一方法却没有。

导航菜单：css垂直居中

3 个答案: