如何在 Apache Royale 的布局中居中放置孩子？

Question

我正在寻找一种简单有效的方法，使用基本包将所有子元素集中在一个容器中。（因为混合基本布局和珠宝布局会导致一些不需要的副作用）

我必须使用 CSS 珠子吗？如果两者都可用，有什么区别，我可以得到每个的代码示例吗？

例如，你能告诉我如何将此代码修改为 center the text label:

<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:j="library://ns.apache.org/royale/jewel"
               xmlns:js="library://ns.apache.org/royale/basic" xmlns:local="*">


    <js:valuesImpl>
        <js:SimpleCSSValuesImpl />
    </js:valuesImpl>



    <js:initialView>
        <js:View>
            <js:beads>
                <js:VerticalLayout/>
            </js:beads>
            <js:Label text="How to center me on horizontal axis ?"/>
        </js:View>
    </js:initialView>

</js:Application>

感谢 yishayw，因为我不熟悉如何添加 css，所以我找到了如何添加，并将完整的工作代码放在这里。我希望 js|View 会触发样式，但是在浏览器 css 上我看到第一个 "view" 的样式名称是“royale”

<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:j="library://ns.apache.org/royale/jewel"
               xmlns:js="library://ns.apache.org/royale/basic" xmlns:local="*">

<fx:Style>
        @namespace j "library://ns.apache.org/royale/jewel";
        @namespace js "library://ns.apache.org/royale/basic";

    .royale {
        align-items :center;
    }

    js|Label {
        color: #ff0000;
    }
 </fx:Style>   

    <js:valuesImpl>
        <js:SimpleCSSValuesImpl />
    </js:valuesImpl>



    <js:initialView>
        <js:View >
            <js:beads>
                <js:VerticalFlexLayout />
            </js:beads>
            <js:Label text="How to center me on horizontal axis ?"/>
        </js:View>
    </js:initialView>

</js:Application>

此致

Answer 1

尝试使用 VerticalFlexLayout 并将 align-items: center 添加到容器的样式。

如何在 Apache Royale 的布局中居中放置孩子？

How to center childs in a layout on Apache Royale?

layout

centering

apache-royale