html - html 表格不会在作为 dojox/layout/contentpane 左侧区域的 div 内居中对齐

Question

我在 dojox/layout/ContentPane 左侧区域 div 中有一个 html 表。我无法让表格在 div 内居中。我试过使用：margin: 0 auto; 在表格的 css 样式中，但表格总是左对齐。该表包含一个 dijit/layout/TabContainer，其中包含填充有 google 图表的内容窗格（也许这些会影响布局？）。以下是我的代码，任何建议表示赞赏。在屏幕截图中，表格边框为黄色，图像左侧的 div 边框为橙色

<div data-dojo-type="dojox/layout/ContentPane" id="FormLeft" data-dojo-props="splitter: false, region:'left'">
        <div id="FormLeft">
            <table class="TblPieCharts">
                <tr>
                    <td>
                        <div data-dojo-type="dijit/layout/TabContainer" class="TCPieChart" id="tcTickets">
                            <div data-dojo-type="dijit/layout/ContentPane" title="Categories" id="DACat"></div>
                            <div data-dojo-type="dijit/layout/ContentPane" title="Priorities" id="DAPriority"></div>
                            <div data-dojo-type="dijit/layout/ContentPane" title="Types" id="DAType"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td><div id="DAFYE" /></td>
                </tr>
            </table>
        </div>
    </div>

CSS：

/*style for content pane*/
#FormLeft {
width: 25%;
background-color:black;
border-width: 6px;
border-color:orange;
}
/*style for table holding pie charts*/
.TblPieCharts {
margin: 0 auto;
align-content:center;
background-color: yellow;
color: white;

}
/*style for tab container*/
.TCPieChart {
width: 350px;
height: 300px;
background-color: black;
margin: 0 auto;
border-width: 0px;
}
/*style for pie chart*/
#DACat {
width: 350px;
height: 250px;
background-color: black;
margin: 0 auto;
border-width: 0px;
}

谢谢

皮特

标签： htmlcssdojo

Answer 1

您可以设置text-align: center为td包含选项卡容器。