如何减少尺寸的简单形式和放置在屏幕中间

Question

我有以下简单的形式：

<Page title="{i18n>authorization}">
<content>
<VBox>
<f:SimpleForm id="registration" editable="true" layout="ResponsiveGridLayout" labelSpanXL="3" labelSpanL="3" labelSpanM="3" labelSpanS="12"
adjustLabelSpan="true" emptySpanXL="3" emptySpanL="3" emptySpanM="3" emptySpanS="0" columnsXL="1" columnsL="1" columnsM="1"
singleContainerFullSize="true">
<f:content>
<Label text=""/>
<Text text="{i18n>userAuthorize}"/>
<Label text=""/>
<Input placeholder="Enter your email address" id="email" type="Email" value="{confirm>/email}" liveChange="onHandleLiveChangeEmail"/>
<Label text=""/>
<Button type="Accept" enabled="{confirm>/enable}" text="{i18n>confirm}" press="handlePressAuthorization"
ariaDescribedBy="acceptButtonDescription genericButtonDescription">
<layoutData>
<FlexItemData growFactor="1"/>
</layoutData>
</Button>
</f:content>
</f:SimpleForm>
</VBox>
</content>
</Page>

在大屏幕上，它伸展得太宽了。我希望这个简单的表单应该有4列的宽度，并放在屏幕的中间
我该怎么做？

Answer 1

尝试给VBox控件一个特定的宽度。这样一来，SimpleForm就只适合这个了。在VBox中，还可以添加alignItems="Center"属性。

如果你想集中控制，也不到屏幕的全宽，你可以做以下操作：

<VBox width="100%" alignItems="Center">
<VBox width="50%" alignItems="Start">
<!-- Content goes here... -->
</VBox>
</VBox>

这样，控件将居中，并且仅拉伸到内部VBox的宽度。