TemplateField의 헤더 텍스트를 중앙 정렬하는 방법은 무엇입니까?

Question

저는 GridView이고 TemplateField 초입니다.

나는 HeaderStyle-HorizontalAlign="Center"을 사용해 TemplateField의 헤더 텍스트를 가운데에 정렬하려고 시도했지만 작동하지 않습니다.

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

어떻게하면 TemplateField의 머리글 텍스트를 정렬 할 수 있습니까?

ItemStyle-HorizontalAlign="Center" 가운데 맞춤 TemplateField의 항목이 올바르게 작동하고 있습니다.

도움이 될 것입니다.

Answer 1

은 내가는 HeaderTemplate에 <center> 태그를 사용하는 문제를 해결하는 방법을 발견했다 (난 그냥 확인하기 때문에) 그 부트 스트랩을 th 요소 text-align: center-3 기본값을 알고 temStyle-HorizontalAlign = "센터"가 작동해야합니다. gridview 스타일은 부모 스타일 시트에서 상속된다는 점에 유의하십시오. 의미, 귀하의 gridview가 certer 정렬되지 적어도 하나의 부모 스타일이 있습니다. 그게 문제가되는 곳이어야합니다.

Answer 2

방금 ​​CSS 스타일이 내 코드를 방해하지 않도록 새로운 WebForms 솔루션을 만들고 부트 스트랩을 제거했습니다. 이것이 내가 당신의 문제를 재현하기 위해 한 일입니다.

영문 : 당신이 볼 수 있듯이

<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을 정의했습니다.

코드 숨김 : 난 그냥 데모 그리드를 만들 수 10 개 더미 항목을 반환하고

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

. 평범하지 않은 것은 아무것도 없다. 당신이 볼 수 있듯이

, 헤더는 기본적으로 중심됩니다

이

은 크롬과 Internet Explorer에서 결과입니다. 그리고 이것은 -BoundFields와 TemaplateFields 모두를위한 것입니다.

다른 스타일 시트가 스타일을 방해하는지 확인하는 것이 좋습니다. 오른쪽으로

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

Answer 3

: 나는

Answer 4

<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가 ASP.Net에 해당합니다 <div>)

여기에 약간의 개선이 다른 곳에서 재사용 할 수 있도록 스타일에 대한 CSS 클래스를 정의하는 것입니다 :

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

을 ... 그리고 인라인 스타일을 사용하는 대신 패널에서 참조 :

<asp:Panel CssClass="center">