1

標準のものとは異なるサイズのカスタムアイコンを使用してjQueryUIボタンを作成しようとしていますが、これらのカスタムアイコンをボタンに正しく適合させるのに問題があります。次のコードは、すべての<button>要素を50x17ピクセルのアイコンで装飾する方法を示しています。また、対応するフィドルも作成しました。

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

問題は、ボタンをそのようなカスタムサイズのアイコンとどのように合わせるか、つまり、アイコンが親ボタンの内側（垂直/水平に整列）に適切に配置されるようにする方法です。

4

2 に答える 2

2

jQuery UI によって生成された CSS を調べた後、解決策を見つけました。秘訣はspan、次の CSS ルールを使用して、アイコンを含む がその親 (ボタン) 内に配置されることであることがわかりました。

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

配置規則 ( position、left、top) が意味することは、余白を除いて、アイコンの左端は親の幅の 50% で、上端は親の高さの 50% であるということです。つまり、アイコンの左上隅はこの写真に示されているように、ボタンの真ん中をピシャリと叩きます。

中央揃えのアイコン

負のマージンの助けを借りて、アイコンはその長さの半分を左にオフセットし、高さの半分を上にオフセットして、効果的に親要素の中央に配置します。8 ピクセルという値は、jQuery のアイコンが 16x16 ピクセルであるためです。

次に、アイコンのサイズ (50x17) に応じて余白を 25 および 8 ピクセルに変更する必要がありました。

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

この更新された fiddleで私のソリューションを確認できます。

于 2012-12-08T11:07:40.363 に答える
1

css の今後のバージョンでは、transform:scale(2,2); JSFiddledを使用してスケーリングできます。

于 2013-06-18T16:50:50.337 に答える