How can I center the titleicon in a Flex 3 panel?

How can I center the titleicon in a Flex 3 panel? The title is centered but the titleicon is way on the left side of the panel.

<mx:Panel  
    title="{myTitle}"    
    textAlign="center"
    titleStyleName="panelTitle" 
    titleIcon="{myIcon}"
    >   


.panelTitle {
    font-size: 14;
    fontFamily: "Lucida Grande";
}   

EDIT: I'm trying to get www.flextras.com suggestion to work. This is what I've got:

package com.mysite.components
{
    import mx.containers.Panel;

    public class CenterTitleIconPanel extends Panel
    {

        override protected function layoutChrome(unscaledWidth:Number, unscaledHeight:Number):void {
            super.layoutChrome(unscaledWidth,unscaledHeight);
                if (titleIconObject)
                {
               开发者_Python百科     titleIconObject.move((unscaledWidth-titleIconObject.width)/2,(unscaledHeight-titleIconObject.height)/2);
                }
        }


        public function CenterTitleIconPanel()
        {
            super();
        }

    }
}

But, I'm getting Error 1178:

1178: Attempted access of inaccessible property titleIconObject through a reference with static type com.mysite.components:CenterTitleIconPanel.

Any suggestions? Thank you.

Extend the component and override the layoutChrome method to reposition the titleIcon.

Roughly something like this:

override protected function layoutChrome(unscaledWidth:Number,
                                             unscaledHeight:Number):void{
 super.layoutChrone(unscaledWidth,unscaledHeight);
            if (titleIconObject)
            {
                titleIconObject.move((unscaledWidth-titleIconObject.width)/2,(unscaledHeight-titleIconObject.height)/2);
            }
 }

I'm, basically, taking the unscaledWidth of the component, subtracting the width of the titleIconObject, and then cutting that value in half to get the X position of the component.

Then I'm using the same approach for the height.

Since the titleIconObject is positioned using a similar approach, I doubt there are styles that will affect the positioning.

The problem you're having with your attempt is that the titleIconObject is put in the custom namespace, mx_internal. This is a bit of black magic on the part of the Flex team. But, to access a property in that custom namespace, you have to import the namespace and use it. This updated code should work:

package com.mysite.components
{
    import mx.containers.Panel;
    import mx.core.mx_internal;    

    use namespace mx_internal;
    public class CenterTitleIconPanel extends Panel
    {

        override protected function layoutChrome(unscaledWidth:Number, unscaledHeight:Number):void {
            super.layoutChrome(unscaledWidth,unscaledHeight);
                if (titleIconObject)
                {
                    titleIconObject.move((unscaledWidth-titleIconObject.width)/2,(unscaledHeight-titleIconObject.height)/2);
                }
        }


        public function CenterTitleIconPanel()
        {
            super();
        }

    }
}

mx_internal is where all the stuff the Flex Team doesn't want to document goes to live (or die).