Question

嗨，我对openui5比较陌生。我正在设计一个登录页面。我的表单设计有“响应式网格布局”。在我的表单组件中，我有一个“FormContainer”。我希望那个容器垂直居中而不影响我的响应式设计。

以下是当前截图： -

我的xml代码如下： -

<mvc:View

xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form"
xmlns:core="sap.ui.core"
xmlns="sap.m" >

<VBox class="sapUiSmallMargin" >
    <f:Form id="Form"
        editable="true"
        ariaLabelledBy="Title1"> 

        <f:layout>
            <f:ResponsiveGridLayout />
        </f:layout>
        <f:formContainers>
            <f:FormContainer ariaLabelledBy="Title2" >

                <f:formElements>
                    <f:FormElement >
                        <f:fields>
                            <Image
                                src="icons/user.jpg"
                                densityAware="false"
                                width="60px" >
                                <layoutData>
                                    <l:GridData span="L1 M1 S1" />
                                </layoutData>
                            </Image>
                            <Input value="{SupplierName}" id="name">
                                <layoutData>
                                    <l:GridData span="L11 M11 S11" />
                                </layoutData>
                            </Input>
                        </f:fields>
                    </f:FormElement>
                    <f:FormElement >
                        <f:fields>
                            <Image
                                src="icons/password.jpg"
                                densityAware="false"
                                width="60px" >
                                <layoutData>
                                    <l:GridData span="L1 M1 S1" linebreak="true" />
                                </layoutData>
                            </Image>
                            <Input value="{Street}" >
                                <layoutData>
                                    <l:GridData span="L11 M11 S11" />
                                </layoutData>
                            </Input>

                        </f:fields>
                    </f:FormElement>

                </f:formElements>

            </f:FormContainer>

        </f:formContainers>
    </f:Form>
</VBox>

请帮助我实现这一目标。如何在不影响表单响应的情况下将白框垂直居中在浏览器中？

Answer 1

您可以通过提供高度并使用属性 - justifyContent：center;

来对齐VBox。

<VBox class="sapUiSmallMargin" height='100%' justifyContent ='Center'>
<!-- rest of the code remains same. -->

如何在openui5中垂直居中对齐我的表单容器

1 个答案: