Centering content in Flex 4

Question

I am creating a custom component that extends SkinnableContainer. I can focus the content vertically or horizontally inside it, but not both, and this is what I need.

I set the layout to HorizontalLayout for the component and set the verticalAlign to medium.

Then I create a canvas to surround another component that is included in this component, and set the canvas width to 100%, and then set textAlign = center, but not cubes.

Any help is appreciated.

Answer 1

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

This will do the trick (if you want a horizontal layout for your items). The ss namespace refers to spark components as you ask for flex 4. I assume Halo is of no 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>