在菜单分隔符图像之间垂直居中菜单项

Question

这就是我想要实现的目标，而且非常接近：

这是我的CSS：

li {
    float: left;
    position: relative;
    padding-left: 55px;
    background: url(../../images/separator.png);
    background-repeat: no-repeat;
    background-position: left bottom;
    height: 87px;
}       

a {
    font-size: 15px;
    line-height: 67px;
}

我差不多了，但有一些问题。我想出的唯一方法是在分隔符的中间垂直放置菜单项是使用行高。但是当然当然，当悬停在链接上时，悬停是行高的高度，我不希望这样。

另外：有没有办法让菜单项“分离”分隔符图像，就像在图片中一样？分隔符图像是透明的png。如果不是，我只是减少菜单项上的填充，试着让它们更接近。

Answer 1

第一种方法：

给链接一个高度，将其从顶部定位50％，将高度的一半定位回顶部：

a {
    font-size: 15px;
  height:30px;
  display:block;
  position:relative;
  top:50%;
  margin-top:-15px;
}

演示 http://jsbin.com/ovaqix/1/edit

第二个解决方案

使元素显示：table-cell和li相同的高度，然后使用vertical-align：

a  {
  display:table-cell;
  height:87px;
  vertical-align:middle;
}

演示

http://jsbin.com/ovaqix/2/edit

表格单元在IE7中不起作用

Answer 2

您是否尝试过更改：在悬停中显示高度？

要让菜单项进入分隔符，我认为你需要在伪元素之前和之后创建，使用border hack生成三角形形状。他的一句话：

a:before {
    border-top: 38px solid transparent;
    border-bottom: 60px solid transparent;
    border-right: 60px solid black;
}

如果您提供更多详细信息，我可以更具体。