菜單項

Question

中的垂直中心精靈箭頭

我正在嘗試使用精靈圖像和類來將特定菜單項標記爲擁有子節點。我有它的工作，但我不認爲我可以垂直居中背景圖像。還不確定這是掛起箭頭（懸停時發生變化）到菜單一側的最佳方式。我有點像精靈，因爲這是我第一次和他們一起玩，我想在所有重要方向上做箭頭來重用。

<nav class="nav"> 
    <div class="nav"> 
     <ul> 
      <li><a href="index.html">HOME</a></li> 
      <li><a href="justjoelabout.html">ABOUT</a></li> 
      <li><a href='#' class="hasChildren"><span>WORK</span></a> 
       <ul> 
        <li class="services1"><a href="justjoelprint.html">PRINT</a></li> 
        <li class="services1"><a href="justjoelbranding.html">BRANDING</a></li> 
        <li class="services1"><a href="justjoeleditorial.html">EDITORIAL</a></li> 
        <li class="services1"><a href="justjoelphotography.html">PHOTOGRAPHY</a></li> 
       </ul> 
      </li> 
      <li><a href="justjoelblog.html">BLOG</a></li> 
      <li><a href="justjoelinspired.html">INSPIRED</a></li> 
      <li><a href="justjoelcontact.html">CONTACT</a></li> 
     </ul> 
    </div> 
</nav> 

相關CSS：

.hasChildren:after { 
    content:" "; 
    display: inline-block; 
    margin-left: 5px; 
    background-image: url("http://i.imgur.com/IRDY4zU.png"); 
    background-repeat: no-repeat; 
    background-position-x:0; 
    background-position-y:0; 
    width: 8px; 
    height: 4px; 
} 

.hasChildren:hover:after { 
    background-image: url("http://i.imgur.com/IRDY4zU.png"); 
    background-position-x:0; 
    background-position-y:-4px; 
} 

Fiddle here

Answer 1

嘗試用vertical-align

.hasChildren:after{ 
    vertical-align:middle; 
} 

Answer 2

首先，請更換

background-position-x:0; 
background-position-y:0; 

與

background-position :0 0; 

，因爲它是魔鬼的兒童（MS/IE）。

而且這可以以百分比（不僅pixcels）進行設置，因此我強烈建議測試：

background-position :0 50%;