Align center SAPUI5

[rubens12]

How can I Align the elements in the center of page?

Bellow is the code and an image about of my view.xml

<mvc:View
	height="100%" 
	controllerName="sap.m.sample.InputStates.C"
	xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form" 
xmlns:m="sap.m" 
xmlns:c="sap.ui.core" 
xmlns="sap.ui.comp.variants">
<l:Grid defaultSpan="L12 M7 S12" width="auto">
		<l:content>
			<f:SimpleForm id="SimpleFormChange354" minWidth="1024" maxContainerCols="2" layout="ResponsiveLayout" editable="true" visible="true">
				<f:content>
					<m:Label text="Login de"  labelFor="multiInput"/>
					<m:MultiInput id="multiInput" valueHelpRequest="valueHelpRequest"  required="true" width="40%"/>
				
					<m:Label text="Para"/>
					<m:MultiInput id="loginPara" valueHelpRequest="valueHelpRequest" required="true" width="40%"/>
				
					<m:Label text="Data de"/>
					<m:DatePicker dateValue="" placeholder="Insira a data" id="datade" required="true" width="40%"/>
					<m:Label text="Data até"/>
					<m:DatePicker dateValue="" placeholder="Insira a data" id="datapara" required="true" width="40%" />
					<m:Label/>
				
					<m:Button type="Accept" press="submit" text="Confirmar" width="20%" />
				</f:content>
			</f:SimpleForm>
		</l:content>
	</l:Grid>
</mvc:View>

I need to put my

Button(Submit) in the center of page

[DK007]

Try to put a bar control as shown in below code. This worked for me.

<Bar id="bar0" translucent="false" design="Header">

<contentMiddle>

<Button text="Submit" width="100px" type="Accept" />

</contentMiddle>

</Bar>

[arthursilva · Accepted solution]

Hello Rubens,

sap.ui.layout.form.SimpleForm are more frequently used to display form fills only. In your case, you should move sap.m.button object to an area different, which accepts object in general. The below code renders sap.m.Button in sap.m.FlexBox, and display it on he center of the screen.

    </f:SimpleForm>    
      <m:FlexBox
        alignItems="Center"
        justifyContent="Center">
      <m:items>
        <m:Button type="Accept" press="submit" text="Confirmar" width="100%" />
      </m:items>
    </m:FlexBox>

  </l:content>
</l:Grid>

Regards,
Arthur Silva

[former_member679019 · Accepted solution]

Works beautifully. Initially i was getting an error saying items needed an attribute space. I checked back and turns out I forgot to put a space between alignItems & justifyContent