垂直居中菜單分隔圖像之間的菜單項

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表細胞不起作用