Setting the vertical alignment on a Spark NumericStepper control in Flex 4

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/05/25/setting-the-vertical-alignment-on-a-spark-numericstepper-control-in-flex-gumbo/ -->
<s:Application name="Spark_NumericStepper_textInput_textView_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">
    <s:controlBarContent>
        <mx:Form styleName="plain" backgroundAlpha="0.0">
            <mx:FormItem label="verticalAlign:">
                <s:DropDownList id="dropDownList"
                        requireSelection="true"
                        change="dropDownList_change(event);">
                    <s:dataProvider>
                        <s:ArrayList source="[top,middle,bottom]" />
                    </s:dataProvider>
                </s:DropDownList>
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import spark.events.IndexChangeEvent;
 
            protected function dropDownList_change(evt:IndexChangeEvent):void {
                numericStepper.textDisplay.textDisplay.setStyle("verticalAlign", dropDownList.selectedItem);
            }
        ]]>
    </fx:Script>
 
    <s:NumericStepper id="numericStepper"
            fontSize="32"
            width="100"
            height="100"
            horizontalCenter="0"
            verticalCenter="0" />
 
</s:Application>