Flex - Vertically position children of a horizontal HBox

Question

I have a custom HBox as so....

public class MyBar extends HBox {

public function MyBar() {
super();

this.height = 65;
this.percentWidth = 100;

var newButton:Button = new Button();
//..... 
newButton.y = 20;

var spacer1:Spacer = new Spacer();
spacer1.percentWidth = 50;

var spacer2:Spacer = new Spacer();
spacer2.percentWidth = 50;

this.addChild(spacer1);
this.addChild(newButton);
this.addChild(spacer2);

}

}

This displays a button in the center of the HBox, but the button is aligned to the top of the Box, I would like it to be in the center.

I'm sure I've had this working before as simply as setting the y value. But doesn't seem to be working now. I am using SDK 3.3

Anyone have any clues as to why I'm having difficulty with this?

Thanks!

Answer 1

Setting the y won't work as the HBox controls the y positions. If you'd like all the buttons to be placed in the middle of the HBox you need to set verticalAlign to middle

in code that would be

setStyle("verticalAlign", "middle");