如何對齊Adobe Flex中的中心元素

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

我不能居中這些元素，我應該從左側放置一個塊並添加寬度以將所有這些元素移動到右側？或者如果我把它們都放在另一個盒子裏，但是如何將它們放在中心呢？但是，有沒有更好的方法來做到這一點？如何對齊Adobe Flex中的中心元素

來源

2013-06-01 Noob Kraker

HBox僅允許您指定垂直對齊爲「中間」，如上所述。它不支持水平居中元素，它只是從左到右水平放置元素。

一個簡單的解決方案是包裹HBox在Canvas這樣你就可以居中：

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

的horizontalCenter屬性告訴Canvas，它應該把HBox 0像素的中心，距離Canvas中心。您可以通過輸入非零值來補償它（與w/verticalCenter相同）。

請注意，在HBox上沒有指定width，這使得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>

在這種情況下你有要求父母框的寬度; 100％Spacer對象。其他物體將以其正常尺寸呈現。佈局邏輯將計算出非隔離器組件需要多少空間，然後劃分隔離器的剩餘可用空間。這可能是一個稍微好一點的解決方案，因爲它使用一個較少的「容器」對象。

來源

2013-06-01 09:33:13

如何對齊Adobe Flex中的中心元素

回答

相關問題