垂直对齐不工作列表菜单

Question

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

我尝试使用：

display: table;
vertical-align: middle;

但它不起作用。

Check my example

请指正。

Answer 1

从float: left删除.mainmenu li，这些都会导致问题。

选中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;
}