垂直对齐不工作列表菜单

Question

我有列表菜单，但是最后一个子菜单是不同的风格。

我尝试使用：

display: table;
vertical-align: middle;

但是没用。

Check my example

请指正。

Answer 1

从 .mainmenu li 中删除 float: left，这就是问题所在。

检查这个 fiddle，vertical-align 工作正常。

Answer 2

更改样式表

.mainmenu
{
   margin-bottom: 0;
}
.mainmenu li
{
float:none;
}

Answer 3

检查这个：http://jsfiddle.net/0y9qtpvz/6/ 替换以下行：

<li><a href="#">Pay <br>Here</a></li>

有了这个：

<li><a href="#">Pay Here</a></li>

并替换以下行：

.mainmenu{
    margin-bottom: -5px;
}

这个：

.mainmenu{
    margin-bottom: 0px;
}