导航菜单：css垂直居中

我试图创建一个均匀间隔的导航菜单，无论菜单项是1行还是2行文本。我使用1行文本进行处理，但如果一个项目触及多行，文本的垂直间距就会关闭。导航菜单：css垂直居中

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

风格：

 #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>

来源

2012-10-18 user891073

您应该创建一个[fiddle]（http://jsfiddle.net）重新创建此问题。 – Shmiddty

谢谢 - 我刚创建了小提琴演示。 – user891073

文本的垂直对齐方式是属使用line-height LLY实现：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到跨越两行的锚元素。

来源

2012-10-18 17:08:19 Shmiddty

然后，您必须事先知道哪些项目占用2行，哪些不占用。例如，在一个多语言网站中，它会不同于语言到另一个... – FelipeAls

@FelipeAls正确，但在非多语言环境中需要向后兼容的情况下，这是另一种选择。 – Shmiddty

您可以使用CSS表格布局（！不是HTML表格元素，EH）来实现这一目标：http://jsfiddle.net/PhilippeVay/ZszJm/

ul显示具有相同的算法为表，以同样的算法比细胞连结，且这里li被显示为垂直的行。然后你就可以用vertical-align就像你想:)（你的情况middle值）发挥
您可以添加到table-layout: fixed和ul然后浏览器将使用其他算法用于显示表，一个不尝试以适应单元格的宽度和高度对其内容，但将坚持CSS规则说。

兼容性：IE8及以上版本。它不会以IE7和6为中心，这不是什么大问题。

编辑：用这种方法，你不需要事先知道哪些项目比其他项目更长。浏览者会想到这一点。

来源

2012-10-18 17:15:45 FelipeAls

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

也有，你可以用一些其他的方法，但他们需要额外的HTML标记，此一个没有。

来源

2012-10-18 17:16:51

导航菜单：css垂直居中

回答

相关问题