Question

我想在<div>中对齐GridView控件。但即使在应用以下方法后，GV似乎仍保持在div的左上角位置：

text-align : center和vertical-align : middle没有结果。

position : relative或margin : auto。

<div align="center">适用于水平对齐，但valign无法找到任何形式的<div>。

到目前为止

布局：

<div id="content1" class="contentSingleCenter" >
    <asp:GridView ID="grdGrid" runat="server"></asp:GridView>
</div>

CSS：

div.contentSingleCenter
{
    width : 80%;
    height : 200px;
    position: relative; 
    margin: auto;
}

我的主要要求是不能使用表来执行此操作。

有什么想法吗？ TIA。

Answer 1

您可以使用RowStyle-VerticalAlign="Center" and RowStyle-HorizontalAlign="Center" ...

Answer 2

尝试line-height: $height_of_box与text-align: center结合使用，请参阅http://jsfiddle.net/ugRd3/。

希望它有所帮助。

Answer 3

使用属性line-height可能适合您，将其设置为与div的高度相同

div.contentSingleCenter
{
    width : 80%;
    height : 200px;
    line-height: 200px; 
    margin: auto;
    text-align:center;
}

Answer 4

试试这个：

div.contentSingleCenter
{
    width : 80%;
    height : 200px;
    position: relative;
    display: table-cell;
    vertical-align: middle; 
    margin: auto;
}

在现代浏览器中测试并且运行良好。您可以在gridview上使用margin-left: auto; margin-right: auto;进行水平居中。

Answer 5

实际上，我发现了一个修复程序...... <align="center">并且有点填充似乎有效：）

Answer 6

根据IE9，gridviews和formviews被翻译成包含行，列等的表格... 因此，为了让它们集中使用：

table
{
margin-left: auto;
margin-right: auto;
}

Answer 7

我知道这是一个老线程，但我发现这对我有用：

asp：GridView控件呈现为嵌套在div中的表。因此，将样式直接应用于控件不会产生所需的结果。我发现将样式应用于div容器的table子项在我的应用程序中效果最好。这实际上只是JGM上面答案的一种排列。

CSS：

.contentSingleCenter table
{
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

我认为这种方法比接受的答案更受欢迎，因为它使用CSS而不是弃用的align属性。

使用CSS在div中对齐控件

7 个答案: