When using TabNavigator how to align content of dynamically added tab - actionscript-3

Question

Given a simple example:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import com.example.Tab;
private function addSecondTab(event:Event):void {
tabs.addChild(new Tab("Second"));
}
]]>
</mx:Script>
<mx:TabNavigator id="tabs" width="100%" height="100%">
<mx:VBox horizontalAlign="center" verticalAlign="middle" label="#1">
<mx:Label text="test"/>
</mx:VBox>
</mx:TabNavigator>
<mx:Button label="Add Second Tab" click="addSecondTab(event)" />
</mx:Application>
package com.example {
import mx.containers.VBox;
import mx.controls.Label;
import mx.events.FlexEvent;
public class Tab extends VBox {
public function Tab(name:String) {
label = name;
setStyle("horizontal-align", "center");
setStyle("vertical-align", "middle");
}
override protected function createChildren():void {
super.createChildren();
var box:VBox = new VBox();
box.setStyle("border-style", "solid");
box.setStyle("border-thickness", 1);
box.setStyle("border-color", 0xFF0000);
var l1:Label = new Label();
l1.text = "Hello!";
box.addChild(l1);
var l2:Label = new Label();
l2.setStyle("fontWeight", "bold");
l2.text = "This is a line of text...";
box.addChild(l2);
addChild(box);
}
}
}
Why aren't styles (border and alignment) being applied inside the second tab?

Answer 1

Flex only supports hyphenated style names in CSS. So in MXML or Actionscript statements you should use the camel case versions of the style names:
horizontalAlign, verticalAlign, borderStyle, etc.
You can read more about it in Adobe's documentation, in particular this section on CSS selector names.