ContentPane의 가운데 맞춤 dijit.form.buttons

Question

3 개의 내용 창이있는 테두리 컨테이너입니다. 왼쪽, 중앙, 오른쪽. 왼쪽 데이터 그리드 (왼쪽 내용 창), 오른쪽 데이터 그리드 (오른쪽 내용 창), 그리드 사이에서 사물을 움직이는 가운데 내용 칸의 2 버튼.

유일한 단점은 단추가 항상 가운데 내용 창 맨 위에 표시된다는 것입니다. 브라우저 크기에 관계없이 센터 창의 가로 및 세로 가운데에 있어야합니다. 나의 실험은 그들을 중심에 두지 못했다.

<div dojoType="dijit.layout.BorderContainer" gutters="false" > 
    <div dojoType="dijit.layout.ContentPane" style="width: 45%; border: 1px solid lightgray" region="left"> 
     <table id="possibleChoices" 
       dojoType="dojox.grid.DataGrid" 
       clientSort="true" 
       queryOptions="{cache:true}" 
       store="possibleChoices" 
       noDataMessage="<s:text name="messages.user.noChoiceAvailable"/>" 
       rowsPerPage="50"> 
      <thead class="hideDojoLoad"> 
       <tr> 
        <th width="100%" field="name">possible choices</th> 
       </tr> 
      </thead> 
     </table> 
    </div> 
    <div dojoType="dijit.layout.ContentPane" region="center" style="text-align: center; vertical-align: middle "> 
     <button dojoType="dijit.form.Button" type="button" onclick="add"><s:text name="button.addArrow"/></button><br/> 
     <button dojoType="dijit.form.Button" type="button" onclick="remove"><s:text name="button.removeArrow"/></button> 
    </div> 
    <div dojoType="dijit.layout.ContentPane" style="width: 45%; border: 1px solid lightgray" region="right"> 
     <table id="choose" 
       dojoType="dojox.grid.DataGrid" 
       clientSort="true" 
       queryOptions="{cache:true}" 
       store="choose" 
       noDataMessage="No data found" 
       rowsPerPage="50"> 
      <thead class="hideDojoLoad"> 
       <tr> 
        <th width="100%" field="name">Choice Made</th> 
       </tr> 
      </thead> 
     </table> 
    </div> 
</div> 

초보자에게 도움을 주실 수있는 분들께 감사드립니다.

Answer 1

트릭은 공백을 차지하는 빈 콘텐츠 창이있는 가운데 내용 창에 테두리 컨테이너를 넣고 있습니다.

<div dojoType="dijit.layout.BorderContainer" gutters="false" > 
    <div dojoType="dijit.layout.ContentPane" style="width: 45%; border: 1px solid lightgray" region="left"> 
    .... 
</div> 
<div dojoType="dijit.layout.ContentPane" region="center"> 
    <div dojoType="dijit.layout.BorderContainer" gutters="false" > 
     <div dojoType="dijit.layout.ContentPane" region="top" style="height:40%; "> 
       &nbsp; 
     </div> 
     <div dojoType="dijit.layout.ContentPane" region="center" style="text-align: center; "> 
       <button dojoType="dijit.form.Button" type="button" onclick="add" style="vertical-align: middle"><s:text name="button.addArrow"/></button><br/> 
       <button dojoType="dijit.form.Button" type="button" onclick="remove"><s:text name="button.removeArrow"/></button> 
     </div> 
    </div > 
</div> 
<div dojoType="dijit.layout.ContentPane" style="width: 45%; border: 1px solid lightgray" region="right"> 
      ..... 
</div>