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>

我不能将这些元素居中，如果我从左边放一个块并添加宽度以将所有这些元素移到右边？或者如果我把它们全部放在一个额外的盒子里，但是如何将它们放在中心位置？，但有没有更好的方法呢？

Answer 1

HBox仅允许您将垂直对齐指定为“中间”，如上所述。它不支持水平居中元素，它只是从左到右水平放置元素。

一个简单的解决方案是将HBox包裹在Canvas中，以便您可以将其置于中心位置：

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

horizontalCenter属性告诉Canvas它应该将HBox 0像素的中心放在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％。其他对象将以正常大小呈现。布局逻辑将确定非间隔器组件需要多少空间，然后将间隔器的剩余可用空间分开。这可能是一个稍微好一些的解决方案，因为它使用了一个较少的“容器”对象。

如何在adobe flex中对齐中心元素

1 个答案: