Centering Content in Flex 4
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>
Comments
-
ruedaminute almost 2 years
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.
-
Marcus Stade over 14 yearsNo problem, happy to help! Nice site you've got btw, keep up the good work!
-
ruedaminute over 14 yearsThanks! Yours too... though I can't read anything the design is very pretty
-
timoxley over 14 yearsThe confusing part about that is both horizontalCenter and verticalCenter properties take an Object as a parameter, as opposed to a Number or int with zero explanation as to why in the documentation: help.adobe.com/en_US/Flex/4.0/langref/spark/primitives/…
-
Marcus Stade over 14 yearsActually, it's an object because you can specify more complex layout behaviour than simply pixels back and forth, such as "col1:10", which would then be interpreted by the compiler as a string instead of a number. Parsing is left to the component. This is called constraintColumns, you can read more about it here: livedocs.adobe.com/flex/3/html/… (Flex 3, although I assume it still applies to at least the components in the mx namespace).