Javascript 如何居中图标+；jquery按钮上的文本

我为UI创建的按钮由一个图标和一些文本组成，因此：

  [ <icon> Some Text ]

设计团队对它的外观有明确的要求，所以我需要一个85像素宽的按钮（我已经管理了这个位），图标和文本之间有5像素的间距，然后将图标+文本对放在按钮的中心

这可能吗？如果可能，如何实现？我还没弄明白

---

看起来默认设置是将按钮上的图标左对齐，然后将文本居中放置在左边，但这看起来不太好。

不是很优雅，但应满足您的要求

$('.myButton').button({
    label: '<span class="ui-button-icon-primary ui-icon icon-custom"></span>text',
}).css({
    width: 85
}).find('.ui-icon').css({
    display:'inline-block',
    position:'relative',
    top:4, //top varies depending on button height / font-size, adapt as needed
    marginRight:5
});

$（'.myButton'）。按钮({
标签：“文本”，
}).css({
宽度：85
}).find（'.ui图标'）.css({
显示：'inline-block'，
位置：'相对'，
顶部：4，//顶部根据按钮高度/字体大小而变化，根据需要进行调整
marginRight:5
});

---

这样，图标就是居中文本范围的一部分。您只需补偿垂直对齐。

是的，图标居中有点困难，如果您设置

text:false

，则可以完成此操作，但您将只获得按钮图标，而不获得按钮文本

但是你可以做一些css技巧来获得它：

.ui-button-icon-primary 
{
   left:5.5em !important;    // default it is 0.5, so it's always on left position...
}​

根据您的要求修改

left

值

$('.myButton').button({
    label: '<span class="ui-button-icon-primary ui-icon icon-custom"></span>text',
}).css({
    width: 85
}).find('.ui-icon').css({
    display:'inline-block',
    position:'relative',
    top:4, //top varies depending on button height / font-size, adapt as needed
    marginRight:5
});

---

这非常巧妙，似乎效果很好（我只需要对垂直定位进行一些调整）。非常感谢。

.ui-button-icon-primary 
{
   left:5.5em !important;    // default it is 0.5, so it's always on left position...
}​