gridview的表头垂直居中以及表头多行显示

最新推荐文章于 2022-08-31 18:24:06 发布

原创最新推荐文章于 2022-08-31 18:24:06 发布 · 2.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#web前端 #c# #css #gridview表头内容垂直居中 #gridview表头多行内容

本文介绍了如何实现GridView表头内容垂直居中，即使表头包含一行或多行文字。针对只有一行标题的情况，可以通过设置GridView属性实现居中；而对于多行标题，文中提供了一种解决方案，通过CSS选择器设置`vertical-align: middle`来达到垂直居中的效果。

有的时候对于gridview有一些需求，是这样的，表头无论一行还是多行，都需要垂直居中那么如何将表头垂直居中，网上的方法也是多种多样，但是其效果的少之又少。尤其是，如果表头有的标题是一行，有的需要用两行，这个时候，怎么做到一行或者多行的表头都可以居中显示呢？那么这里介绍一些方法。

首先讲一下，如果表头的headertext中只有一行的标题，没有多行的标题，那么采取如下方法，在gridview的第一个属性中就填写一个属性。应该就是可以居中了：

.header
{
    line-height:40px;
}

<HeaderStyle CssClass="<span style="font-family: Arial, Helvetica, sans-serif;">header</span>" />

用行高控制，即可，当然，想要多高都是可以的。那么这只是一行标题垂直居中的一个方法。那么讨论多行标题垂直居中之前，首先，需要先讲述一下，我实现多行标题的方法，这个方法网上大多数地方也是有的，我这里仅仅是做了一次代码的搬运工，代码如下：

  <asp:TemplateField ItemStyle-CssClass="itemBorder" ItemStyle-Width="80px" HeaderStyle-Width="80px" >
    <HeaderTemplate>
      <table align="center" class="table">
        <tr>
          <td>问题</td>
        </tr>
        <tr>
          <td>负责人</td>
        </tr>
      </table>
    </HeaderTemplate>
    <ItemTemplate>
      <%# Eval("person")%>
    </ItemTemplate>
  </asp:TemplateField>

这其中我的headerStyle-cssClass就是上文的header类选择器名称。这里采用templateField作为容器，承载每一列。headerTemplate就是表头容器，ItemTemplate是内容的承载容器，用来绑定数据表的列名。按照以往的习惯，我是这样想的，如果一行我的line-height属性为30，那么两行的话，我只要重新定义一个选择器如下：

.table{
  margin:0;
  padding:0;
  height:40px;//与header行高一致;
}
.table td{
  line-height:20px;
}

可是会发现，这样实现的效果和理想中是有一些偏差的，那么还差一点什么？我发现在我的电脑上，table即使有了margin:0;padding:0两个属性，在header中，还是会有少许的偏下，那么，我就想在写一个header的class：

.header2{
  line-height:30px;
}

我将采用表格的header行高属性减少到30，整体应该会向上提升。按照道理来说是这样的，可是又和理想不一样了！会发现，根本没有任何变化。那么我仔细琢磨后，发现，可能是因为行高，后面加入的私有的属性行高不能低于原来的行高，这样讲逻辑有点乱，还是通过程序来说。上面我们的思路不是设置一个总体的行高属性为40px，然后对表格栏的行高为：30px，现在反过来，我们总体的行高属性设置为30px；而对其他所有一行的标题，我们都添加一个headerStyle-cssClass属性，这两个class为：

.header
{
    line-height:30px;
}

.header2
{
    line-height:40px;
}

对于一开始设置gridview的属性的时候，这样写：

<HeaderStyle CssClass="<span style="font-family: Arial, Helvetica, sans-serif;">header</span>" />

然后对除了表格以外的其他只有一行的标题，这样添加：

<asp:BoundField DataField="customer" HeaderText="客户名称" ItemStyle-CssClass = "itemBorder"  HeaderStyle-CssClass="header2"  >
  <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
     <ItemStyle Width="80px" />
  <HeaderStyle Width="80px" />
</asp:BoundField>

这样是可以实现的，当然这只是近似的实现，也就是那个30px，你们可能需要自行测试一下，调整到对于自己项目最有利的地方这样视觉上才能得到最好的体验。我不知道为什么我这里没有办法做到完美的居中。我会再找找方法。

（Ps：插个题外话，我这里直接加这句话<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />好像也是没有办法实现内容垂直居中的，我最后的解决方法实在外面用css写一个选择器，里面有verticle-align属性，设置为middle即可。）