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

有的时候对于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即可。）