Flex，HBox：如何将所有孩子水平居中？答案

【问题标题】：Flex, HBox: how to horizontally center all children?Flex，HBox：如何将所有孩子水平居中？
【发布时间】：2010-04-19 13:49:52
【问题描述】：

我无法将 VBox 中的组件居中。我想设置标准的CSS元素“对齐：中心”。如何在 Flex 中做到这一点？

<mx:VBox>
    <mx:LinkButton label="Tag1" />
    <mx:Image source="@Embed(source='../icons/userIcon.png')" />
    <mx:Label id="username" text="Nickname" visible="false" fontWeight="bold"   />
</mx:VBox>

谢谢

【问题讨论】：

标签： apache-flex

【解决方案1】：

简单地说，你可以这样做：

<mx:VBox width="200" horizontalAlign="center">
    <mx:Label text="foo" />
</mx:VBox>

我刚刚尝试了这个示例，它运行良好。如果容器的宽度由其子级决定，则它可能无法正确对齐：

<mx:VBox horizontalAlign="center" borderStyle="solid">
    <mx:Label text="foo" />
    <mx:Label text="bar" />
</mx:VBox>

但是，进一步指定宽度会显示此属性起作用：

<mx:VBox width="200" horizontalAlign="center" borderStyle="solid">
    <mx:Label text="foo" />
    <mx:Label text="bar" />
</mx:VBox>

【讨论】：

我想知道 VBox 宽度是否由其子级设置。试试这个：将 VBox 宽度设置为预期的 2 倍左右，然后查看“horizontalAlign”是否有效。
抱歉，它成功了。我的错。图像仍然没有真正居中。有什么办法可以设置水平偏移吗？谢谢