visual studio 2010 -使用CSS在div内对齐控件

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, gridview和formview被转换成带有行、颜色等的表格…因此，为了让它们居中，请使用:

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

Answer 7

我知道这是一个旧的线程，但这里是我发现为我工作:

GridView控件呈现为嵌套在div中的表。正因为如此，将样式直接应用于控件不会产生期望的结果。我发现，在我的应用程序中，将样式应用于div容器的表子元素效果最好。这实际上只是JGM上面的答案的一个排列。 CSS:

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

我相信这个方法会比接受的答案更可取，因为它使用CSS而不是过时的align属性。