How can I place a gridview center div or panel.?

Question

Hello! Can someone tell me how can I place the Gridview in the center in a Div or panel? I applied the following CSS, but its 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 Gridview Property May 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

Make sure this works for me. The ultimate gridview is converted to a table, so apply the following stylesheet to your gridview, which I applied to the 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

A small case of thread necromancy, but I had the same problem, and I managed to fix it by aligning the code block, not the gridview itself.

Basically, I set the width of the element to 40% and leave it up to 30% (which means that the right is also 30%, since it's mathematics), and this positions the entire batch, text, grid and everything in the middle of the page.

Css looks something 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 is working. Just make sure its parent container is wider, so it can center

http://jsfiddle.net/C7ybw/

 #container{ width:800px; border:1px solid #000; }