Question

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

我想让单个行项目在菜单中间垂直对齐，但此刻它们似乎保持在顶部。我尝试过vertical-align：middle 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;。并在vertical-align: middle;上设置a，而不是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;
}
}

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

2 个答案: