Centering Content in Flex 4

14,899

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>
Share:
14,899
ruedaminute
Author by

ruedaminute

http://blog.ruedaminute.com

Updated on June 04, 2022

Comments

  • ruedaminute
    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
    Marcus Stade over 14 years
    No problem, happy to help! Nice site you've got btw, keep up the good work!
  • ruedaminute
    ruedaminute over 14 years
    Thanks! Yours too... though I can't read anything the design is very pretty
  • timoxley
    timoxley over 14 years
    The 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
    Marcus Stade over 14 years
    Actually, 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).