Flex layout 2 objects with first one centered

Question

I have two labels (A and B) in a Flex VBox, with the horizontal alignment set to "center". I'd like to set A to be vertically centered (in the exact center of the container) and B to be underneath A (or on the bottom; either will do). What's the best way to rig this?

Answer 1

Add B to the container after A. The whole point of a VBox is to stack things vertically, so it will do what you want fairly easily.

If what you're wanting it to position things differently horizontally, you'll want to use a combination of VBoxes and HBoxes (and perhaps spacers). For example:

Vbox( Label A Hbox(spacer, Label B) )

Answer 2

I found that using a grid control works very nicely to accomplish the task, and without adding in blank labels:

<mx:Grid width="100%" height="100%">
  <mx:GridRow height="20%"/>
  <mx:GridRow height="60%">
    <mx:GridItem verticalAlign="middle" horizontalAlign="center">
      <mx:Label text="Label A" fontSize="60" fontFamily="Arial"/>   
    </mx:GridItem>
  </mx:GridRow>
  <mx:GridRow height="20%" verticalAlign="middle">
    <mx:GridItem verticalAlign="middle" horizontalAlign="center">
      <mx:Label text="Label B" fontSize="24" fontFamily="Arial"/>
    </mx:GridItem>
  </mx:GridRow>   
</mx:Grid>

Answer 3

Your answer is overly complex. Use a Canvas instead of VBox. Then override "updateDisplayList" function.

override protected function updateDisplayList(w:Number, h:Number):void {
  super.updateDisplayList(w,h);
  if(a && b) {
    a.y = w/2 - a.height/2;
    b.y = a.y + a.height; 
  }
}