How to align center elements in adobe flex

Question

    <mx:HBox left="186" textAlign="center" verticalAlign="middle" backgroundColor="#FF0000" top="155" height="44" width="100%" styleName="biletBar">
        <s:Image buttonMode="true" id="prev" source="@Embed(source='arrowLeft.png')"/>
        <s:Label text="tickets from 1 to 12 of 48"/>
        <s:Image buttonMode="true" id="next" source="@Embed(source='arrowRight.png')"/>
    </mx:HBox>

I can't center those elements, should I put a block from the left and add width to move all this elements to the right? or if I put them all in an additional box, but how to center it too?, but is there a better way to do that?

Answer 1

The HBox only allows you to specify a vertical alignment as "middle" as you have done above. It doesn't support centering elements horizontally, it just lays the elements out horizontally from left to right.

One simple solution is wrap the HBox in a Canvas so you can center it:

<mx:Canvas width="100%">
    <mx:HBox horizontalCenter="0" verticalCenter="0">
        ...
    </mx:HBox>
</mx:Canvas>

The horizontalCenter property tells the Canvas that it should put the center of the HBox 0 pixels from the center of the Canvas . You can offset it by putting in non-zero values (same w/ verticalCenter ).

Notice that the width is not specified on the HBox , this makes the HBox be only as large as it needs to be to display its contents.

Another alternative w/out using an extra container, would be similar to what you suggested in your question. Use some Spacer objects to occupy most of the space in the HBox :

<mx:HBox width="100%" verticalAlign="middle">
    <mx:Spacer width="100%"/>
    <mx:Image ... />
    <mx:Label ... />
    <mx:Image ... />
    <mx:Spacer width="100%" />
</mx:HBox>

In this scenario you have two Spacer objects that request 100% of the width of the parent box. The other objects will get rendered at their normal sizes. The layout logic will figure out how much space the non-spacer components need, and then divide up the remaining available space for the spacers. This may be a slightly better solution, in that it uses one less "container" object.