垂直对齐不起作用的列表菜单

【问题标题】：Vertical align not working list menu垂直对齐不起作用的列表菜单
【发布时间】：2015-11-11 05:57:29
【问题描述】：

我有列表菜单，但最后一个子菜单的样式不同。

我尝试使用：

display: table;
vertical-align: middle;

但它不起作用。

请纠正我。

【问题讨论】：

【解决方案1】：

从.mainmenu li 中删除float: left，这就是问题的根源。

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

【讨论】：

【解决方案2】：

更改样式表

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

【讨论】：

【解决方案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;
}

【讨论】：