select2 옵션 안에 아이콘을 세로로 가운데 맞추는 방법은 무엇입니까?

Question

나는 select2 plugin에 옵션이 있습니다. 오른쪽에 fontawesome 아이콘을 추가합니다. 그러나 선택 옵션을 고려하여 수직으로 정렬되지 않았습니다. 이 이미지는 명백해 :

내가 float: left; position: relative;를 추가 오른쪽에 넣어하십시오.

확인 생 바이올린 : http://jsfiddle.net/uAnLJ/10/

CSS

body { 
    padding: 20px; 
} 

.fa-check-circle{ 
    float: right; 
    position: relative; 
} 

JS

function format(referencia) { 
    if (!referencia.id) return referencia.text; // optgroup 

    if ($(referencia.element).data('active') == "1") { 
     return referencia.text + "<i class='fa fa-check-circle'></i>"; 
    } else { 
     return referencia.text; 
    } 
} 

$("#mysel").select2({ 
    width: "100%", 
    formatResult: format 
}); 

HTML

<select id="mysel"> 
    <optgroup label="First group"> 
     <option value="0" data-active="1">Hello</option> 
     <option value="1" data-active="0">Stack</option> 
    </optgroup> 
    <optgroup label="Second group"> 
     <option value="2" data-active="1">Overflow</option> 
     <option value="3" data-active="1">Friends</option> 
    </optgroup> 
</select> 

아이디어/대안이 있습니까?

자세한 정보가 필요하면 알려 주시면 해당 게시물을 편집하겠습니다.

Answer 1

여기 line-height 추가 :

.fa-check-circle { 
    float: right; 
    position: relative; 
    line-height: 20px; 
} 

LIVE DEMO

Answer 2

어떻게 그냥 그렇게처럼 .fa-check-circle 일부 패딩을 추가하는 방법에 대한 :

padding-top:2px; 

을