垂直居中與背景圖像的跨度

Question

我有一個無序的鏈接列表，每個鏈接都包含一些文本和span元素。

<li class="ui-state-default"><a href="#pg-control">Control<span class="ui-icon ui-icon-right_arrow"></span></a></li> 

我想的圖標垂直居中相出現在李（內嵌文字）

這裏是我的CSS

li { 
    line-height: 240%; 
    display: block; 
    border-bottom: 1px solid #666; 
    padding: 5px; 
} 

li a { 
    text-decoration: none; 
    color: #000; 
    display: block; 
} 

.ui-icon { 
    width: 24px; 
    height: 24px; 
    float: right; 
    display: inline-block; 
} 

注意我我不使用jQuery，我意識到我的類名是相同的。這僅僅是巧合。

Answer 1

你可以移動圖標是李的背景，或：

給出li相對定位，然後給圖標絕對定位。將圖標從頂部放置50％，然後減去圖標高度的上半部分。這將使圖標垂直居中。

li { 
    position: relative; 
    line-height: 240%; 
    display: block; 
    border-bottom: 1px solid #666; 
    padding: 5px; 
} 

li a { 
    text-decoration: none; 
    color: #000; 
    display: block; 
} 


.ui-icon { 
    position: absolute; 
    top: 50%; 
    right: 10px; 
    margin-top: -12px 
    width: 24px; 
    height: 24px; 
    display: inline-block; 
} 

Answer 2

如果是我，我會做的箭頭li有點像background-image：

li{ 
    background:transparent url(the_arrow.jpg) no-repeat center right; 
} 

I've coded an example...