배경 이미지로 스팬을 수직으로 가운데에 맞 춥니 다

Question

각 텍스트와 스팬 요소가 포함 된 링크의 순서가 지정되지 않은 목록이 있습니다.

<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; 
} 

주 I입니다 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...