flex 4 center element in a group - apache-flex

Question

I am playing around with flex 4 GUI with a simple alignment but couldnt figure out why.
I have button1, button2, and a text field. I want to align them horizontally, and center vertically for the text.
For the following code, i see the following output.
_______ ______
|bt1 | |bt2 | text1
|______| |______|
my question is;
1) why with the properties i sent on btn 1 verticalCenter="10" and btn2 verticalCenter="-10" they are still aligned? shouldnt i see one is up and the one is donw?
2 ) why my text1 is aligned top, even though i set it to verticalCenter=0, i tried it with or without in a group.
Thanks guys
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955"
minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Group minWidth="100">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<s:Button label="myButton" click="" horizontalCenter="0"
verticalCenter="10"/>
<s:Button label="myButton" click="" verticalCenter="-10"/>
<s:Group verticalCenter="0" horizontalCenter="0">
<s:Label text="hello" color="#FFFF" verticalCenter="0"
textAlign="center" />
</s:Group>
</s:Group>
</s:Application>

Answer 1

It might be helpful for others to understand why this occurs, as it is a common problem.
When you use a HorizontalLayout or VerticalLayout some properties you set on the "layout objects" are not used. This occurs because these properties do not really work or make sense in a vertical/horizontal layout.
Layout properties that are ignored by vertical/horizontal layouts:
x and y coordinates
horizontalCenter and verticalCenter
top, bottom, left, right contstraints
The above properties will work for the default BasicLayout class.
As indicated in the answer by #Mahesh Parate, the vertical/horizontal layouts do allow for content to be centered by using the horizontalAlign and verticalAlign properties.

Answer 2

Below code may help you: - add verticalAlign="middle" in HorizontalLayout this will solve your problem.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955"
minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
protected function onClickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
}
]]>
</fx:Script>
<s:Group minWidth="100" >
<s:layout>
<s:HorizontalLayout verticalAlign="middle"/>
</s:layout>
<s:Button label="myButton" click="onClickHandler(event)" horizontalCenter="0"
verticalCenter="10"/>
<s:Button label="myButton" click="onClickHandler(event)" verticalCenter="-10"/>
<s:Group verticalCenter="0" horizontalCenter="0">
<s:Label text="hello" color="#FFFF" verticalCenter="0"
textAlign="center" />
</s:Group>
</s:Group>
</s:Application>