openui5에서 양식 컨테이너를 수직으로 정렬하는 방법

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. -->