如何居中对齐 TemplateField 的标题文本？

Posted 2023-02-22

【中文标题】如何居中对齐 TemplateField 的标题文本？

【英文标题】：How to center align the header text of a TemplateField?

【发布时间】：2018-04-17 03:57:03

【问题描述】：

我有一个GridView 和TemplateFields。

我已尝试HeaderStyle-HorizontalAlign="Center" 将 TemplateField 的标题文本对齐到中心，但它不起作用。

<asp:TemplateField HeaderText="Events" HeaderStyle-HorizontalAlign="Center" 
    ItemStyle-HorizontalAlign="Center">
</asp:TemplateField>

如何将 TemplateField 的标题文本居中对齐？

ItemStyle-HorizontalAlign="Center" 对齐中心时，TemplateField 的项目工作正常。

任何帮助将不胜感激！

【参考方案1】：

我刚刚创建了一个新的 WebForms 解决方案并删除了引导程序，以确保没有 css 样式干扰我的代码。这是我为重现您的问题所做的。

aspx:

<asp:GridView runat="server" ID="grid" Style="width: 500px;">
    <Columns>
        <asp:TemplateField HeaderText="FirstName - TemplateField">
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server" Text='<%# Bind("FirstName") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>

</asp:GridView>

如你所见，我定义了一个 TemplateField 没有任何额外的 css 样式。

代码隐藏：

public partial class _Default : Page

    protected void Page_Load(object sender, EventArgs e)
    
        grid.DataSource = GetPersons();
        grid.DataBind();
    

    public IEnumerable<Person> GetPersons()
    
        for(int i = 0; i< 10; i++)
        
            yield return new Person  FirstName = $"Johni", LastName = "Doe", Age = i ;
        
    

我只是返回 10 个虚拟项目来创建演示网格。没什么特别的。

这是 Chrome 和 Internet Explorer 中的结果：

如您所见，标题默认居中。这适用于 -BoundFields 和 TemaplateFields。

如果您不是这种情况，我建议您检查是否有其他样式表干扰了您的样式。我知道对于th 元素，bootstrap 3 默认为text-align: center（因为我刚刚检查过）

【讨论】：

我的问题是HeaderStyle-HorizontalAlign 不起作用。感谢您的回复。

我已经写过，很可能另一种风格会覆盖它。

【参考方案2】：

我找到了一种方法来解决我在 HeaderTemplate 中使用 <center> 标记的问题：

<asp:TemplateField ItemStyle-HorizontalAlign="Center">
    <HeaderTemplate>
        <center>
            Events
        </center>
    </HeaderTemplate>
<asp:TemplateField>

【参考方案3】：

正确地， temStyle-Horizo​​ntalAlign="Center" 应该可以工作。 请注意，您的 gridview 样式是从父样式表继承的。 意思是，您的 gridview 至少有一种不是 certer align 的父样式。 这应该是你的问题所在。

【参考方案4】：

<center> 标签在 html 4.01 中已弃用，在 HTML5 中不受支持 - 您发布的 working code 可能是“CSS-ified”，如下所示：

<asp:TemplateField ItemStyle-HorizontalAlign="Center">
    <HeaderTemplate>
        <asp:Panel style="margin-left: auto; margin-right: auto; text-align: center;">
            Events
        <asp:Panel>
    </HeaderTemplate>
<asp:TemplateField>

（注意：Panel 是<div> 的 ASP.Net 等价物。）

这里的一个小改进是为样式定义一个 CSS 类，以便可以在其他地方重用：

.center 
  margin-left: auto;
  margin-right: auto;
  text-align: center;

...并从面板中引用它而不是使用内联样式：

<asp:Panel CssClass="center">

【参考方案5】：

尝试这样使列中的文本居中：

.centeralign 
   text-align: center;


<ItemStyle CssClass="centeralign" />


<asp:TemplateColumn HeaderStyle-VerticalAlign="Top">

                              <HeaderTemplate>
                                 <asp:LinkButton runat="Server" ID="linkbuttonSortType" Text="Type" />
                                 <br>
                                 <asp:DropDownList runat="Server" ID="dropdownlistTypeFilter" AutoPostBack="true"
                                    Style="width: 100%;" OnSelectedIndexChanged="FilterChanged" />
                              </HeaderTemplate>
                              <ItemStyle CssClass="centeralign" />
                              <ItemTemplate>
                                 <asp:Literal runat="server" ID="litType" Text='<%# Eval("call_type").ToString() == "2" ? "Fax" : "Voice" %>' />
                              </ItemTemplate>
                           </asp:TemplateColumn>

【参考方案6】：

<asp:TemplateField >
                            <HeaderTemplate>
                               <label style="text-align:center;display:block;"> Date</label>                                        
                            </HeaderTemplate>
                            <ItemTemplate>
                                <asp:Label DataField="Created_Date" Style="font-size: medium; font-`enter code here`weight: bold;" ID="Created_Date_Id" runat="server" Text='<%# Bind("Created_Date") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>

【讨论】：

欢迎来到 ***！请解释您的解决方案。