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>