jQuery UI 단추에 사용자 정의 크기 아이콘을 맞추려면 어떻게합니까?

Question

jQuery UI 단추를 표준 아이콘과 크기가 다른 사용자 지정 아이콘으로 만들려고하는데 이러한 사용자 지정 아이콘을 단추에 정확하게 맞추는 데 어려움이 있습니다. 다음 코드는 모든 <button> 요소를 50x17 픽셀 아이콘으로 장식하는 방법을 보여줍니다. 해당 fiddle도 생성했습니다.

자바 스크립트 :

$('button').button({icons: {primary: 'login-icon'}, text: false});​ 

CSS :

.ui-button .ui-icon.login-icon { 
    background-image: url(http://i.imgur.com/qLgpl.png); 
    width: 50px; 
    height: 17px; 
}​ 

문제는 아이콘이 제대로 내부 을 배치되도록 수직으로 (버튼 즉, 같은 사용자 정의 크기의 아이콘과 함께 맞게 만드는 방법입니다/가로 정렬) 부모 단추?

Answer 1

jQuery UI 생성 CSS를 연구 한 후에 해결책을 찾았습니다.

position: absolute; 
left: 50%; 
top: 50%; 
margin-left: -8px; 
margin-top: -8px; 

은 무엇 위치 규칙 ( position, left, top)을 의미하는 것입니다, 산세 : 나는 트릭 아이콘을 포함하는 span는 다음과 같은 CSS 규칙을 사용하여 부모 (버튼) 내부에 위치되는 것을 발견 아이콘의 왼쪽 가장자리는 부모의 너비의 50 %이고 위쪽 가장자리는 부모의 높이의 50 %에 있어야합니다. 즉,이 그림에 표시된 것처럼 아이콘의 왼쪽 상단 모서리가 단추 가운데에 두들겨 맞습니다. :

음수 여백의 도움으로, 아이콘은 왼쪽 길이의 반 길이와 높이 길이의 절반만큼 상쇄되어, 효과적으로 부모 요소의 중앙에 오게됩니다. 8 픽셀의 값은 jQuery의 아이콘이 16x16 픽셀이기 때문입니다.

그때했습니다 조정, 25 개 및 8 픽셀 내 아이콘 (50x17)의 크기에 따라 여백을 수정했다 :

position: absolute; 
left: 50%; 
top: 50%; 
margin-left: -25px; 
margin-top: -8px; 

당신이 updated fiddle 내 솔루션을 볼 수 있습니다. 사용 당신은 단지 그것을 확장 할 수 있습니다 CSS의 향후 버전에서는

Answer 2

transform:scale(2,2); JSFiddled