Flex 101: Vertical centering text in Flex

Solution: Put the Text control inside a VBox control. Then wrap two Spacer instances around the Text control, with one before, one after the Text control. Set percentage height of both Spacers to 100. Like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:VBox verticalAlign="middle" width="300" height="400" backgroundColor="0x000000" borderStyle="solid" borderColor="0x000000" cornerRadius="6">
<mx:Spacer height="100%"/>

<mx:Text text="Motorola's New Mobile Unit CEO Sanjay Jha: 'Too Little, Too Late?' - 12 hours ago
Now that Motorola ( NYSE: MOT) has chosen a CEO for its struggling handset unit, everyone wants to know can Sanjay Jha save the company, ...
Washington Post - 647 related articles »" color="0xffffff" width="100%" height="100%" textAlign="center"/>

<mx:Spacer height="100%"/>

Just use verticalAlign=”middle”. You would need to care about “verticalScrollPolicy”/”horizontalScrollPolicy” in certain cases though compared to the methods described above.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: