如何将图像居中在ExtJS GridPanel的列中？

Question

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?

Answer 1

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

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

Answer 2

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.

Answer 3

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