How can i place Gridview center of div or panel.? - css

Question

Hello!
Can anyone tell me how can I place any Gridview in center in Div or panel? I have applied following CSS but its does not working:
<asp:Panel ID="pnlGrid" CssClass="panel" runat="server">
<div style="text-align:center">
<asp:GridView ID="grdReqApproval" runat="server" AutoGenerateColumns="false" CssClass="SimpleGrid">
<Columns>
<asp:BoundField DataField="Approved By" HeaderText="Approved By" />
<asp:BoundField DataField="User Name" HeaderText="User Name" />
<asp:BoundField DataField="Approval Time" HeaderText="Approvel Time" />
</Columns>
</asp:GridView>
</div>
</asp:Panel>
.panel
{
width: 330px;
padding: 10px;
min-height: 20px;
border: 1px solid #dcdcdc;
margin-left:auto;
margin-right:auto;
}

Answer 1

HorizontalAlign property of Gridview can solve your problem
<asp:Panel ID="pID" runat="server">
<div>
<asp:GridView ID="gvID" runat="server" AutoGenerateColumns="false"
HorizontalAlign="Center">
<Columns>
...
...
</Columns>
</asp:GridView>
</div>

Answer 2

Check this is working for me , Ultimatly gridview get converted to table so the apply following stylesheet to your gridview which i applied to table
CSS
.centered-table {
margin-left: auto;
margin-right: auto;
}
HTML
<div>
<table class="centered-table" border="1">
<tr><td>Pekin</td> <td>Illinois</td></tr>
<tr><td>San Jose</td><td>California</td></tr>
</table>
</div>
JsFiddle Demo

Answer 3

Slight case of thread necromancy, but I was having the same problem and managed to fix it by aligning the code block rather than the gridview itself.
Basically I set the width of the element to 40%, and left to 30% (which means right is also 30%, because maths) and that positions the whole lot, text, grid and all into the middle of the page.
The css looks roughly like this
GridExample
{
position:absolute;
left:30%;
width:40%;
padding:0;
margin:0;
}

Answer 4

on your div text-align: center

Answer 5

as you see here, your class works. Just be sure its parent container is wider so it can center
http://jsfiddle.net/C7ybw/
#container{
width:800px;
border:1px solid #000;
}

Answer 6

.div_text_center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
<div class="div_text_center">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:GridView ID="GridView1" runat="server" HorizontalAlign="Center">
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>