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

VBoxの高さを指定し、-justifyContent：center;というプロパティを使用して、VBoxを中央揃えにすることができます。

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