无法居中 jqGrid

Question

我尝试将下面的代码添加到 grid.css，但仍然无法使 jqGrid 居中。有什么修改可以让jqGrid居中吗？

.center { width: 640px; margin-left: auto; margin-right: auto; }

或

.center .ui-jqgrid {
margin-left: auto;
margin-right: auto;
}

以上代码我引用自How to center a JqGrid

我的 grid.css 的一部分：

.GridHeader {
}
.Header {
width: 100%;
}
.Header th { 
font-size: 100%; font-weight: bold; text-align: left;
padding: 2px;
background-image: url(images/headerbg.gif) ;
color: #FFFFFF;
width: 100%;
white-space: nowrap;
}
.HeaderLeft { 
background-image: url(images/headerleft.gif);
}
.HeaderRight { 
background-image: url(images/headerright.gif);
}
.HeaderButton {
background-image: url(images/headerbg.gif); 
}
.HeaderButton img{
width: 17px;
}
.HeaderLeft img{
width: 14px;
}
.HeaderRight img{
width: 10px;
}
.GridHeader table {margin:0;}
.GridHeader td, tr {padding:0;}

Answer 1

我想你在测试中犯了小错误。 margin-left: auto; margin-right: auto; 的使用非常简单。重要的是 CSS 样式仅应用于具有固定 width 值的 div。例如，如果您将以下 HTML 片段用于 jqGrid

<table id="list"></table>
<div id="pager"></div>

然后在从#list 表创建网格期间，将在<table id="list"></table> 的位置创建许多其他外部潜水和表。构造中最外层的 div 将是具有一些固定宽度的 div、"ui-jqgrid" 类和由 gbox_ 前缀和网格 id 构造的 id。如果id="list" 用于表格，则外部 div 将获得 id="gbox_list"。因此，您可以使用以下 CSS 样式中的 one 来设置网格：

.ui-jqgrid { margin-left: auto; margin-right: auto; }

或

#gbox_list { margin-left: auto; margin-right: auto; }

如果您将<table id="list"></table> 放在下面的某个外部 div 内，您可以应用相同的样式

<div class="mycenter">
    <table id="list"></table>
    <div id="pager"></div>
</div>

并与 CSS 规则结盟

.mycenter > .ui-jqgrid { margin-left: auto; margin-right: auto; }

以上所有方法都可以。 The demo 现场直播。