Dojo 在ContentPane中居中dijit.form.button

我创建了一个包含3个内容窗格的边框容器。左，中，右。左侧数据网格（左侧内容窗格）、右侧数据网格（右侧内容窗格）、中心内容窗格中的两个按钮，用于在网格之间移动内容

我唯一的问题是设置按钮的格式按钮总是出现在中心内容窗格的顶部。无论浏览器大小如何，我都需要它们位于中心窗格的水平和垂直中心。我的实验没能使它们居中

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

可能的选择


选择

---

感谢所有能够帮助初学者的人。

诀窍是在中心内容窗格中放置一个边框容器，其中一个空内容窗格只会占用空间

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

....


.....

诀窍是在中心内容窗格中放置一个边框容器，其中一个空内容窗格只会占用空间

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

....


.....