Centering Content in Flex 4

Question

I'm building a custom component that extends SkinnableContainer. I can center the content either vertically or horizontally inside it, but not both-- and that is what I need.

I'm setting the layout to HorizontalLayout for the component and setting verticalAlign to middle.

Then I'm creating a canvas to surround another component that goes inside this component, and setting that canvas width to 100%, and then setting textAlign=center, but no dice.

Any help is appreciated.

Answer 1

Use the horizontalCenter and verticalCenter properties to center your groups. The value is the number of pixels from either center where the sign of value denotes direction, 0 is absolute center.

This'll do the trick (assuming you want horizontal layout for your items). The 's' namespace refers to the spark components, since you're asking about flex 4 I assume Halo isn't of interest.

<s:Group>
    <!-- Any parent with BasicLayout will acknowledge horizontalCenter and verticalCenter -->
    <s:layout>
         <s:BasicLayout />
    </s:layout>

    <s:Group horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:HorizontalLayout/>
        </s:layout>

        <s:Button />
        <s:Button />
        <s:Button />
    </s:Group>
</s:Group>