jquery - 无法居中jqGrid

我试图将下面的代码添加到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;}

最佳答案

我想您在测试中犯了小错误。 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样式之一：

.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实时显示。

关于jquery - 无法居中jqGrid，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21507583/