Vertical Layout and HGroup centering

Question

I am running a Flex 4 app with a Skinnable Container with a skin applied. The container uses a VerticalLayout (to expand/contract with loaded text). When I try to center a button on the bottom using an HGroup with a HorizontalCenter property, it doesn't take and the button aligns to the left...
Code below...
<?xml version="1.0" encoding="utf-8"?>
<s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="fireEvent()"
skinClass="com.cairngorm.personalization.skins.Bac kgroundRectDynamic"
>
<fx:Style source="assets/Main.css" />
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Label id="header"
text="Add photo."
width="250" height="100%"
styleName="h2left" />
<mx:Spacer height = "15"/>
<s:RichEditableText id="msgbody"
width="250" height="110%"
text="Your card cover should have a photo. Drag and drop your photo into your card."
styleName="h4"
verticalAlign="top"
editable ="false"/>
<mx:Spacer height = "10"/>
<s:HGroup horizontalCenter="0">
<s:Button skinClass="com.cairngorm.personalization.skins.Btn PrimarySkin" label="OK" click="popOkClick();" buttonMode="true" mouseChildren="false" id="okBtn" />
</s:HGroup>
</s:SkinnableContainer>

Answer 1

Hi,
HorizontalCenter wont work in VerticalLayout.
Change this line
<s:HGroup horizontalCenter="0">
to
<s:HGroup width="100%" horizontalAlign="center">