如何居中對齊 TemplateField 的標題文本？

Question

我有一個帶有TemplateField的GridView 。

我試過HeaderStyle-HorizontalAlign="Center"將 TemplateField 的標題文本對齊到中心，但它不起作用。

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

如何將 TemplateField 的標題文本居中對齊？

當ItemStyle-HorizontalAlign="Center"對齊中心時，TemplateField 的項目工作正常。

任何幫助將不勝感激！

Answer 1

<center>標記在 HTML 4.01 中已棄用，在 HTML5 中不受支持 - 您發布的工作代碼可能是“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">

Answer 2

我剛剛創建了一個新的 WebForms 解決方案並刪除了引導程序，以確保沒有 css 樣式干擾我的代碼。 這就是我為重現您的問題所做的工作。

ASP：

<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 = $"John{i}", LastName = "Doe", Age = i };
        }
    }
}

我只是返回 10 個虛擬項目來創建一個演示網格。 沒有什么異常。

這是 Chrome 和 Internet Explorer 中的結果：

如您所見，標題默認居中。 這適用於 -BoundFields 和 TemaplateFields。

如果您不是這種情況，我建議您檢查是否有任何其他樣式表干擾了您的樣式。 我知道 bootstrap 3 默認為text-align: center for th元素（因為我剛剛檢查過）

Answer 3

沒錯， temStyle-Horizo​​ntalAlign="Center" 應該可以工作。 請注意，您的 gridview 樣式是從父樣式表繼承的。 意思是，您的 gridview 至少有一個不對齊的父樣式。 那應該是你的問題出現的地方。

Answer 4

我找到了一種方法來解決我在 HeaderTemplate 中使用<center>標簽的問題：

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

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

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