Question

我GridView与TemplateField s。

我已尝试HeaderStyle-HorizontalAlign="Center"将TemplateField的标题文本与中心对齐，但它无效。

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

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

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

任何帮助都将非常感谢！

Answer 1

HTML 4.01中不推荐使用<center>标记，HTML5不支持该标记 - 您发布的工作代码可以是＆＃34; CSS-ified＆＃34;如下：

<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解决方案并删除了bootstrap，以确保没有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>

正如您所看到的，我已经定义了一个没有任何其他css样式的TemplateField。

代码隐藏：

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。

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

Answer 3

右边，temStyle-HorizontalAlign =＆＃34; Center＆＃34;应该工作。请注意，您的gridview样式是从父样式表继承的。这意味着，您的gridview至少有一个不是certer对齐的父样式。这应该是你的问题所在。

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>

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

6 个答案: