Vertically aligning labels in a Spark Button control in Flex 4

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/30/vertically-aligning-labels-in-a-spark-button-control-in-flex-4/ -->
<s:Application name="Spark_Button_verticalAlign_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Script>
        <![CDATA[
            import spark.events.IndexChangeEvent;
            import flashx.textLayout.formats.VerticalAlign;
 
            protected function btnBar_change(evt:IndexChangeEvent):void {
                var value:String = btnBar.itemToLabel(btnBar.selectedItem);
                btn.labelDisplay.setStyle("verticalAlign", value);
            }
        ]]>
    </fx:Script>
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="verticalAlign:">
                <s:ButtonBar id="btnBar"
                        labelField="label"
                        requireSelection="true"
                        selectedIndex="1"
                        change="btnBar_change(event);">
                    <s:dataProvider>
                        <s:ArrayList>
                            <fx:Object label="{VerticalAlign.TOP}" />
                            <fx:Object label="{VerticalAlign.MIDDLE}" />
                            <fx:Object label="{VerticalAlign.BOTTOM}" />
                            <fx:Object label="{VerticalAlign.JUSTIFY}" />
                        </s:ArrayList>
                    </s:dataProvider>
                </s:ButtonBar>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <s:Button id="btn"
            label="The quick brown fox jumps over the lazy dog"
            width="100" height="100"
            horizontalCenter="0" verticalCenter="0"
            creationComplete="btn.labelDisplay.maxDisplayedLines = 0;" />
 
</s:Application>