Flex 4 Center Rendered CheckBox on DataGridColumn

Question

I am having an issue trying to center checkboxes without modifying the structure on DataGridColumn, after the migration from flex 3 to 4 the checkboxes are not appearing centered, is there any trick to center the checkboxes using css?

<mx:DataGridColumn 
    headerRenderer="mx.controls.CheckBox" 
    itemRenderer="mx.controls.CheckBox"                                 
    textAlign="center"
    editable="false" width="50"/>

PD: looks like textAlign="center" is just working for text labels now.

Answer 1

You can write an inline Headerrenderer and Itemrenderer for the datagridcolumn as below

<mx:DataGridColumn
    textAlign="center"
    editable="false" width="50">
    <mx:headerRenderer>
      <fx:Component>
        <mx:Canvas width="100%" height="100%">
          <mx:CheckBox horizontalCenter="0" />
        </mx:Canvas>
      </fx:Component>
     </mx:headerRenderer>
     <mx:itemRenderer>
      <fx:Component>
       <mx:Canvas width="100%" height="100%">
        <mx:CheckBox horizontalCenter="0" />
       </mx:Canvas>
      </fx:Component>
     </mx:itemRenderer>
    </mx:DataGridColumn>