将文本对齐到菜单li中的中心

Question

我已经创建了一个包含子菜单的菜单。对于每个我使用填充来指定宽度并在li中心对齐文本，正如我的同事所建议的那样是小提琴创建的jsfiddle.net/p7Nsf/4/

但是我必须将每个li元素划分为980px以便它将填充980px所以我在li项目上使用了宽度我的问题是如何将文本与主菜单和子菜单中的li元素的中间对齐以及我的子文件菜单hieght和宽度已经改变了。这里是更新的小提琴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，并添加了填充。