1

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

  [ <icon> Some Text ]

我正在使用 jQuery 创建按钮，其 HTML 如下：

<button class="myButton" type="button"/>

和这样的JavaScript：

$('.myButton').button({
                    label: "Some Text",
                    icons: {
                        primary: "icon-custom",
                    }
                })
                .css({ width: '85px' });

设计团队已经指定了它的外观要求，所以我需要一个 85 像素宽的按钮（我已经管理了那个位），图标和文本之间有 5 像素的间隙，然后将图标+文本对居中按钮。

这可能吗？如果可以，怎么做？我一直无法弄清楚。

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

4

2 回答 2

2

是的，将图标居中有点困难，如果您设置它可以完成，text: false但您只会得到按钮图标，没有按钮文本。

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

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

left根据您的要求修改该值。

jsfiddle

于 2012-12-12T10:43:13.743 回答
1

不是很优雅，但应该照顾你的要求。

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

小提琴

这样，图标是居中文本跨度的一部分。你只需要补偿垂直对齐。

于 2012-12-12T10:28:54.997 回答