The following example shows how you can use the Button class’s textAlign style and labelPlacement property to control the text layout in a Button control.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/26/changing-a-button-controls-text-alignment-and-label-placement/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
[Bindable]
[Embed(source='assets/brick.png')]
private var BrickIcon:Class;
]]>
</mx:Script>
<mx:ApplicationControlBar dock="true">
<mx:Label text="textAlign:" />
<mx:ComboBox id="textAlignCB" selectedIndex="1">
<mx:dataProvider>
<mx:String>left</mx:String>
<mx:String>center</mx:String>
<mx:String>right</mx:String>
</mx:dataProvider>
</mx:ComboBox>
<mx:Spacer width="50" />
<mx:Label text="labelPlacement:" />
<mx:ComboBox id="labelPlacementCB" selectedIndex="1">
<mx:dataProvider>
<mx:String>left</mx:String>
<mx:String>right</mx:String>
<mx:String>top</mx:String>
<mx:String>bottom</mx:String>
</mx:dataProvider>
</mx:ComboBox>
</mx:ApplicationControlBar>
<mx:HBox>
<mx:Button label="Button"
textAlign="{textAlignCB.selectedItem}"
width="120"
paddingTop="5"
paddingBottom="5" />
<mx:Button label="Button"
icon="{BrickIcon}"
textAlign="{textAlignCB.selectedItem}"
labelPlacement="{labelPlacementCB.selectedItem}"
width="120"
paddingTop="5"
paddingBottom="5"
verticalGap="0" />
</mx:HBox>
</mx:Application>
View source is enabled in the following example.

{ 3 comments… read them below or add one }
I’ve download and run this example, but icon didn’t align with text. See screenshot.
I’m using flex builder 2.0.1
I’ve try this example on flex builder 3 M2 beta 1, but got the same result – icon didn’t centered with text :(
And now is the question how to align the text Left, and the icon right.