我的网格视图无法居中。多次尝试过

时间:2016-11-24 10:25:41

标签: html 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; }

我无法看到我的网格视图。任何人都可以帮助我这样做。以上是应用的.net和css代码

2 个答案:

答案 0 :(得分:1)

在一些场景中可能是复杂的中心元素(相对方式)尊重其他元素。在研究了它之后,尝试了不同的方法,我发现了一种几乎适用于所有场景的方法。

您可以尝试下一步(注意您的具体情况)。将这些属性提供给您想要居中的元素:

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

让我知道结果。

干杯队友。

答案 1 :(得分:0)

将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>