CODEWITHSUNDEEP
htmlcss
Samsam
Samsam

Reputation: 95

How to center my gridview in HTML and CSS

<asp:GridView ID="GridView1" runat="server"  AutoGenerateColumns="false" Width="1000px" AllowPaging="True" PageSize="8" OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating" OnPageIndexChanging="GridView1_PageIndexChanging" OnRowCancelingEdit="GridView1_RowCancelingEdit" OnRowDeleting="GridView1_RowDeleting" CssClass="Grid" AlternatingRowStyle-CssClass="alt" PagerStyle-CssClass="pgr" >
    <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" /> <AlternatingRowStyle CssClass="alt" ></AlternatingRowStyle> <PagerStyle CssClass="pgr"></PagerStyle></GridView>


.Grid {background-color: #fff; margin-left:0; margin-right:0; border: solid 1px #525252; border-collapse:collapse; font-family:Calibri; color: #474747; float:left; text-align: center;}
.Grid td { padding: 2px; border: solid 1px #c1c1c1; } .Grid th  {

  padding : 4px 2px;

  color: #fff;

  background: #4bc970 url(Images/grid-header.png) repeat-x top;

  border-left: solid 1px #525252;

  font-size: 0.9em; } .Grid .alt {

  background: #fcfcfc url(Images/grid-alt.png) repeat-x top; } .Grid .pgr {background: #363670 url(Images/grid-pgr.png) repeat-x top; } .Grid .pgr table { margin: 3px 0; } .Grid .pgr td { border-width: 0; padding: 0 6px; border-left: solid 1px #666; font-weight: bold; color: #fff; line-height: 12px; }  .Grid .pgr a { color: Gray; text-decoration: none; }.Grid .pgr a:hover { color: #000; text-decoration: none; }

I can't center my gridview. Can anyone help me do that? The .net and css code I am using is above.

Upvotes: 1

Views: 108

Answers (2)

Kenzo_Gilead
Kenzo_Gilead

Reputation: 2439

In a few scenarios it could be complicated to center an element (relative way) with respect to other elements. After researched it, and tried different approaches, I found a way which could work in almost all scenarios.

You can try the following (taking care about your specific case). Give these properties to the element that you want to center:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Let me know about the result.

Cheers mate.

Upvotes: 1

symlink
symlink

Reputation: 12209

To center anything in CSS:

.outer-container{
    display:flex;
    align-items:center;
    justify-content:center;
}


.outer{
  width:80vw;
  height:80vh;
  display:flex;
  align-items:center;
  justify-content:center;
  border:solid 2px blue;
}

.inner{
   height:30px;
   width:30px;
   background-color:orangered;
}
<div class="outer">
   <div class="inner"></div>
</div>

Upvotes: 0

Related Questions