5

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;
}
5
  • have you tried "text-align:center;" ? Apr 18, 2013 at 13:41
  • That class will work, be sure to place the class on a div containing your gridview. Also it be sure the div is smaller than its parent div so it can center.
    – Lotok
    Apr 18, 2013 at 13:43
  • Can you supply a jsfiddle of your full code so we can see how it is working?
    – Andrew
    Apr 18, 2013 at 13:45
  • You have made your panel 330px wide. Unless your grid is smaller, how can it center? Move that panel class on to the div and be sure the panel control is wider than 330px. oh and please use jsfiddle!
    – Lotok
    Apr 18, 2013 at 13:52
  • is that worked for you ?? Apr 18, 2013 at 14:35

6 Answers 6

17

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>
1
  • Simple and direct to the point! Been looking for this feature!
    – Scarl
    Nov 18, 2017 at 12:41
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

2

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;
}
0

on your div text-align: center

2
  • thanks wazaminator,but its only centralize the gridview text not whole grid i have already tried it .
    – SANDEEP
    Apr 18, 2013 at 13:42
  • I don't usualy work with gridview. if you put a second div around your gridview and the test-align on the big one, would it work? Apr 18, 2013 at 13:45
0

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;
}
0
.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>

enter image description here

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.