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

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

你有没有试过改变说明在一个悬停的高度？

为了让菜单项进入分隔符，我认为你需要在伪元素之前和之后创建，边界黑客才能生成三角形形状。他的一行：

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

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

Answer 2

第一种方法：

给该链接的高度，位置它50％从顶部，有一半的高度回到顶部：

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

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

第二解

使a元素显示：表格单元格和li的高度相同，然后使用vertical-align：

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

演示

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

在IE7表细胞不起作用