How to center an image in a column in an ExtJS GridPanel?

I would like to horizontally center the icon in the column "Data":

I've got textAlign: center on my column:

And in the icon renderer function, I'm horizontally centering it开发者_开发百科 with CSS:

Yet it is still left-aligned.

What else do I have to do so that the icon in the column is centered horizontally?

Adding align: 'center' to the actioncolumn item did the trick, like so:

{
   xtype: 'actioncolumn',
   text: 'Edit',
   align: 'center',
   items: [{**}]
}

This is somewhat of a guess, because I don't have anything to test.

I notice that margin: 0 auto isn't working to center the image.

This leads me to think that you need display: block on the image - that should let your margin rule do what you expect.

Maybe you need to change the render function like this:

function renderDataIcon(val) {
    if(val=='online') {
        return '<div style="width:100%;height:16px;background-image:url(/images/icon_yellow_dot.png);background-position:center center;background-repeat:no-repeat;">&nbsp;</div>';
    } else {
        return '<div style="width:100%;height:16px;background-image:url(/images/icon_red_dot.png);background-position:center center;background-repeat:no-repeat;">&nbsp;</div>';
    }
}