How do you center a control in an MXML panel?

Question

Here is what I have:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="#ffffff">
    <mx:VBox percentHeight="100" percentWidth="100" >
        <mx:Image source="@Embed('img.png')" percentHeight="100" percentWidth="100"  />
    </mx:VBox>
</mx:Application>

How can I center the mx:Image in the mx:Application?

Answer 1

Since your Image control is taking up the whole space, you want the horizontalAlign and verticalAlign styles:

  <mx:Image source="@Embed('img.png')" 
            percentHeight="100" 
            percentWidth="100" 
            horizontalAlign="center" 
            verticalAlign="middle" />

If your image were less than 100% width, you might use the horizontalCenter and verticalCenter styles (equal to 0) instead or as well.