我如何放置div或面板的Gridview中心。

时间:2013-04-18 13:39:16

标签: css

您好! 任何人都可以告诉我如何将Gridview置于Div或面板的中心位置?我已经应用了以下CSS,但它不起作用:

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

6 个答案:

答案 0 :(得分:14)

Gridview的

HorizontalAlign属性可以解决您的问题

    <asp:Panel ID="pID" runat="server">
     <div>
       <asp:GridView ID="gvID" runat="server" AutoGenerateColumns="false"
 HorizontalAlign="Center">
          <Columns>
             ...
             ...
          </Columns>
    </asp:GridView>
    </div>

答案 1 :(得分:2)

检查这对我有用,Ultimatly gridview转换为表格,以便将以下样式表应用到我应用于表格的gridview

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 :(得分:2)

线程坏死的轻微情况,但我遇到了同样的问题并设法通过对齐代码块而不是gridview本身来修复它。

基本上我将元素的宽度设置为40%,并将其设置为30%(这意味着右边也是30%,因为数学)并将整个批次,文本,网格和所有内容定位到页面的中间

css看起来大致如此

GridExample
{
position:absolute;
left:30%;
width:40%;
padding:0;
margin:0;
}

答案 3 :(得分:0)

你的div text-align: center

上的

答案 4 :(得分:0)

如你所见,你的班级有效。请确保其父容器更宽,以便它可以居中

http://jsfiddle.net/C7ybw/

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

答案 5 :(得分: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