Làm cách nào để căn giữa văn bản tiêu đề của một TemplateField?

Question

Tôi đã là GridView với TemplateField s.

Tôi đã thử HeaderStyle-HorizontalAlign="Center" để căn chỉnh văn bản tiêu đề của TemplateField thành trung tâm nhưng nó không hoạt động.

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

Làm cách nào để căn giữa văn bản tiêu đề của Mẫu nội dung?

Trong khi ItemStyle-HorizontalAlign="Center" căn giữa các mục của TemplateField hoạt động chính xác.

Mọi trợ giúp sẽ thực sự được đánh giá cao!

Answer 1

Tôi đã tìm thấy một cách mà giải quyết được vấn đề, trong đó tôi đã sử dụng một thẻ <center> trong HeaderTemplate:

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

Answer 2

Tôi vừa tạo giải pháp WebForms mới và xóa bootstrap chỉ để đảm bảo rằng không có kiểu css nào can thiệp vào mã của tôi. Đây là những gì tôi đã làm để tái tạo vấn đề của bạn.

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> 

Như bạn thấy đấy, tôi đã xác định một TemplateField mà không cần bất kỳ phong cách css bổ sung.

CodeBehind:

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 }; 
     } 
    } 
} 

Tôi chỉ trở về 10 mặt hàng giả để tạo ra một mạng lưới demo. Không có gì khác thường.

Đây là kết quả trong Chrome và Internet Explorer:

Như bạn có thể thấy, các tiêu đề được tập trung theo mặc định. Và điều này là cho cả hai -BoundFields và TemaplateFields.

Nếu đây không phải là trường hợp của bạn, tôi khuyên bạn nên kiểm tra xem có bất kỳ bảng định kiểu nào khác đang can thiệp vào kiểu của bạn hay không. Tôi biết rằng bootstrap 3 mặc định là text-align: center cho th yếu tố (Bởi vì tôi chỉ cần kiểm tra)

Answer 3

By đúng, temStyle-HorizontalAlign = "Trung tâm" nên hoạt động. Chỉ cần lưu ý rằng các kiểu xem lưới của bạn được kế thừa từ biểu định kiểu gốc. Có nghĩa là, chế độ xem lưới của bạn có ít nhất một kiểu gốc mà không phải là căn chỉnh của certer. Đó phải là vấn đề của bạn.

Answer 4

Thẻ <center> bị phản đối trong HTML 4,01 và không được hỗ trợ trong HTML5 - mã làm việc bạn được đăng có thể là "CSS-ified" như sau:

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

(Lưu ý: Panel là ASP.Net tương đương của một số <div>.)

Một cải tiến nhỏ ở đây là xác định một lớp CSS cho phong cách để nó có thể được tái sử dụng ở những nơi khác:

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

... và tham khảo nó từ bảng điều khiển thay vì sử dụng inline style:

<asp:Panel CssClass="center">