在双行导航菜单中垂直对齐单行项目

Question

我目前正在构建一个 Wordpress 网站，其导航菜单包含需要第二行的长标题项目。但是，剩下的一些项目只是简短的单词，不需要换行。

我想让单行项目在菜单中间垂直对齐，但目前它们似乎停留在顶部。我尝试了垂直对齐：中间 css，但这并没有解决问题。

这是主列表 css：

    .main-navigation li {
    margin: 0px 0px 0px 0px;
    vertical-align: middle;
    font-size: 18px;
    height: 50px;
    padding-top: 0px;
    text-align: center;
    width: 116.5px;
    word-wrap: normal;
    background-color: #fec20f;
    }

关闭高度有效，但会丢失项目上方和下方的背景颜色。

我制作了一个 jsfiddle 来展示我目前拥有的东西： http://jsfiddle.net/KM99G/

Answer 1

给.main-navigation li a 一个display: table-cell; 而不是display: inline-block;。 并在a 上设置vertical-align: middle;，而不是li

示例： http://jsfiddle.net/KM99G/4/

Answer 2

喜欢这个

demo

css

.main-navigation ul.nav-menu {
    display: inline-block !important;
text-align: left;
width: 100%;
}

.main-navigation li {
margin: 0px 0px 0px 0px;
vertical-align: middle;
font-size: 18px;
height: 50px;
padding-top: 0px;
text-align: center;
width: 116.5px;
word-wrap: normal;
background-color: #fec20f;
    display:table-cell;
}


.main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a, .main-navigation .current_page_item > a, .main-navigation .current_page_ancestor > a {
color: #fec20f;
background-color: #000000;
font-weight: bold;
height: 50px;
width: 116.5px;
    vertical-align:middle;
}

.main-navigation li a, .main-navigation li {
display: table-cell;
text-decoration: none;
}

ul {
list-style: none;
}

nav {
display: block;
}

.main-navigation li a {
color: #000000;
}

.main-navigation li a, .main-navigation li {
display: table-cell;
text-decoration: none;
}

.main-navigation li {
font-size: 18px;
text-align: center;
}

.main-navigation li {
line-height: 1.42857143;
}

body {
    width: 960px;
}
}