Question

我是sencha touch的新手。我有一个带有撰写图标的按钮。根据按钮的给定大小，图标出现在我的按钮的右下角。任何人都可以帮助我调整它吗？ iconAlign属性对我不起作用。

                        {
                            xtype: 'button',
                            ui: 'action',
                            iconMask: true,
                            iconCls: 'compose',
                            iconAlign:'center',
                            width:35,
                            height: 25,
                            action:'landedInfo'
                        }

Answer 1

您必须将padding属性设置为0，因为您提供的宽度和高度太小，因此会弄乱您为'iconAlign'提供的'center'值：

{
    xtype: 'button',
    ui: 'action',
    iconMask: true,
    iconCls: 'compose',
    iconAlign:'center',
    width:35,
    height: 25,
    padding:0,
    action:'landedInfo'
}

一种看待它的方法是增加宽度和高度，比如100x50，然后你会得到一个居中的图标而不触及填充属性...... 我承认一开始发现这可能很棘手。

希望这有帮助

Answer 2

在css中设置边距有助于我将图标放在中心位置：

.x-tab .x-button-icon.compose,.x-button .x-button-icon.x-icon-mask.compose
{

margin-left:-5px;
margin-top:-5px;
margin-right:-7px;
margin-bottom:-5px;
    }

Answer 3

我尝试这个并且适合我：

{
    xtype: 'button',
    ui: 'normal',
    text:'LOGOUT',
    iconMask: true,
    iconCls: 'user',
    iconAlign:'center',            
     padding:0,
    cls: 'x-iconalign-top',

}

Answer 4

如果使用icon-font，则可以使用css。

.x-button-icon {
    /*Icon centering*/
    position:absolute;
    width:1em;//set width of icon relative(icon is font)
    top:50%;
    margin-top:-0.5em;//half of icon height shift back
    left:50%;
    margin-left:-0.5em;//half of icon width shift back
}

You can also absolutey position a component in Sencha Touch using the top, right, bottom and left configurations of any component. This works like the position: absolute CSS code.

如何在sencha touch中将按钮中心的图标对齐？

4 个答案: