javascript - 如何将自定义大小的图标放入 jQuery UI 按钮中？

Question

我正在尝试创建带有自定义图标的 jQuery UI 按钮，这些按钮的大小与标准图标不同，但是我很难让这些自定义图标正确地适合按钮。以下代码演示了我如何装饰所有 <button>带有 50x17 像素图标的元素，我还创建了相应的 fiddle .

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

问题是如何使按钮与此类自定义大小的图标相匹配，即如何将图标正确放置在内部(垂直/水平对齐)父按钮？

Answer 1

在研究了 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;

你可以在这个 updated fiddle 中看到我的解决方案.