0 
    <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>

これらの要素を中央に配置することはできません。左からブロックを配置し、幅を追加してこのすべての要素を右に移動する必要がありますか? または、それらすべてを追加のボックスに入れる場合、それを中央に配置する方法も?, しかし、それを行うより良い方法はありますか?

4

1 に答える 1

0

HBox上で行ったように、垂直方向の配置を「中央」に指定できるのは だけです。要素を水平方向にセンタリングすることはサポートされていません。要素を左から右に水平に配置するだけです。

簡単な解決策の 1 つは、 を a で囲み、HBox中央Canvasに配置できるようにすることです。

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

horizontalCenterプロパティは、の中心から 0 ピクセルCanvasの中心を配置する必要があることを に伝えます。ゼロ以外の値を入力することでオフセットできます（ と同じ）。HBoxCanvasverticalCenter

widthは で指定されていないことに注意してくださいHBox。これにより、 はHBoxその内容を表示するのに必要なだけ大きくなります。

追加のコンテナを使用しない別の代替案は、質問で提案したものと似ています。オブジェクトを使用Spacerして、 のほとんどのスペースを占有しますHBox。

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

このシナリオSpacerでは、親ボックスの幅の 100% を要求する 2 つのオブジェクトがあります。他のオブジェクトは通常のサイズでレンダリングされます。レイアウト ロジックは、スペーサー以外のコンポーネントに必要なスペースを割り出し、スペーサー用に残りの使用可能なスペースを分割します。これは、使用する「コンテナー」オブジェクトが 1 つ少ないという点で、少し優れたソリューションになる可能性があります。

于 2013-06-01T09:33:13.777 に答える