將文本對齊到菜單li的中心

Question

我已經創建了一個帶有子菜單的菜單。對於每個李我用填充來指定寬度和對齊文本在中心李在我的同事建議這裏是小提琴創建jsfiddle.net/p7Nsf/4/

但我不得不分裂每個元素980px所以它會填充980像素，所以我使用li項目的寬度我的問題是我如何將文本對齊主要菜單和子菜單中li元素的中間，我的子菜單高度和寬度已經改變了。這裏是更新的小提琴jsfiddle.net/p7Nsf/5/

Answer 1

只需添加一個line-height。

Updated jsFiddle here

我說：

.menu ul li a { 
    line-height: 30px; 
} 

更新CSS：

.menu ul li a { 
    display: block; 
    width: 121px; 
    line-height: 30px; 
    text-align: center; 
    color: #fff; 
    text-decoration: none; 
} 

要解決的下拉問題，我補充說：

.menu ul ul li a { 
    height: 35px; 
    color: #000; 
    display: block; 
    width: 200px; 
    text-align: left; 
    padding-left: 10px; 
} 

我指定了一個寬度，設置爲text-align:left，並添加了填充。