如何將自定義大小圖標放入jQuery UI按鈕？

我試圖創建一個自定義圖標從通用的標準不同大小的，jQuery UI的按鈕，但我有使這些自定義圖標困難正確地進入按鈕。以下代碼演示瞭如何用50x17像素圖標修飾所有<button>元素，我還創建了相應的fiddle。如何將自定義大小圖標放入jQuery UI按鈕？

的Javascript：

$('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; 
}

的問題是如何使按鍵結合在一起的這樣的自定義大小的圖標，即，使得圖標被妥善安置內（垂直/水平對齊）父按鈕？

2012-12-07 aknuds1

我發現在研究了jQuery的用戶界面生成的CSS後的溶液。我發現，訣竅是，包含圖標的span使用下面的CSS規則位於其父（按鈕）內：

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

什麼定位規則（position，left，top）的意思是說，SANS的邊緣，圖標的左邊緣應該是父寬度的50％，頂邊是父親高度的50％，即該圖標的左上角會被擊中按鈕的中間位置，如此圖所示：

Centered icon

在負邊界的幫助下，該圖標向左偏移一半長度，向上偏移一半高度，以便它有效地在父元素中居中。 8像素的值是由於jQuery的圖標是16x16像素。

我不得不做出然後調整，是根據我的圖標（50x17）的大小，以25 8個像素修改邊距：

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

你可以看到我在這個updated fiddle解決方案。

2012-12-08 11:07:40 aknuds1

在CSS中你可以擴展它的未來版本使用transform:scale(2,2); JSFiddled

2013-06-18 16:50:50 SumGuy

回答