Question

I cannot center the components in my VBox. I would like to set the standard css element “align: center”. How can I do that in Flex ?

<mx:VBox>
    <mx:LinkButton label="Tag1" />
    <mx:Image source="@Embed(source='../icons/userIcon.png')" />
    <mx:Label id="username" text="Nickname" visible="false" fontWeight="bold"   />
</mx:VBox>

thanks

Answer 1

Simply put, you can do this:

<mx:VBox width="200" horizontalAlign="center">
    <mx:Label text="foo" />
</mx:VBox>

I just tried this example, and it worked fine. If the container’s width is being dictated by its children, it might not appear to align correctly:

<mx:VBox horizontalAlign="center" borderStyle="solid">
    <mx:Label text="foo" />
    <mx:Label text="bar" />
</mx:VBox>

However, further specifying the width shows this attribute to work:

<mx:VBox width="200" horizontalAlign="center" borderStyle="solid">
    <mx:Label text="foo" />
    <mx:Label text="bar" />
</mx:VBox>