我是一个带有 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>
感谢任何可以帮助初学者的人。