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唯一允许您像上面所做的那样将垂直对齐指定为“中间” 。它不支持水平居中元素，它只是从左到右水平放置元素。

一个简单的解决方案是将HBoxa包裹起来，Canvas以便您可以将其居中：

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

该horizontalCenter属性告诉Canvas它应该将HBox0 像素的中心从Canvas. 您可以通过输入非零值（与 w/ 相同verticalCenter）来抵消它。

请注意，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% 的父框宽度。其他对象将以正常大小呈现。布局逻辑将计算出非间隔组件需要多少空间，然后为间隔分配剩余的可用空间。这可能是一个稍微好一点的解决方案，因为它使用了一个更少的“容器”对象。

于 2013-06-01T09:33:13.777 回答