html - 在菜单 li 中将文本居中对齐

Question

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

但是我必须将每个 li 元素划分为 980px 以便它填充 980px 所以我在 li 项目上使用了宽度 我的问题是如何将文本对齐到主菜单和子菜单中的 li 元素的中间以及我的子菜单高度和宽度已经改变了。这是更新的小提琴 jsfiddle.net/p7Nsf/5/

Answer 1

只需添加一个line-height.

在这里更新了 jsFiddle

我补充说：

.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并添加了填充。