Flexponential

The VerticalLayout and HorizontalLayout classes now support both the horizontalAlign and verticalAlign properties. This brings the VGroup and HGroup components in line with how the VBox and HBox halo controls worked.

This was added very recently, builds after 4.0.0.13354 will have this functionality.

So if you want to center align elements of a VGroup/HGroup you can now easily do so:

<s:VGroup id="group1" horizontalAlign="center" verticalAlign="middle" width="200" height="200">
    <s:Button label="center" />
</s:VGroup>

In the code above, verticalAlign values will only have an effect when the contentHeight of group1 is less than its height. If the contentHeight is equal to or larger than height then the value of verticalAlign will be ignored and essentially act like “top”. The same idea applies for horizontalAlign in a HGroup.

Note that spark differs from halo in how layouts round to the nearest pixel. Halo always rounded down using Math.floor(), whereas spark uses Math.round(). I believe the spark behavior is better, but if you have a differing opinion then see SDK-24954.

For reference sake SDK-24416 is the enhancement that officially requested this major axis alignment functionality.

Note: This sample requires Flex SDK 4.0.0.13354 or higher. You can get the latest SDK builds from opensource.adobe.com.