Jak wyśrodkować tekst nagłówka szablonu TemplateField?

Question

Mam GridView z TemplateField s.

Próbowałem HeaderStyle-HorizontalAlign="Center", aby wyrównać tekst nagłówka TemplateField do centrum, ale nie działa.

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

Jak mogę wyśrodkować tekst nagłówka szablonu?

Podczas gdy ItemStyle-HorizontalAlign="Center" wyrównanie środka, elementy TemplateField działają poprawnie.

Każda pomoc będzie doceniona!

Answer 1

znalazłem sposób, że rozwiązali problem, w którym użyłem <center> tag w HeaderTemplate:

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

Answer 2

Właśnie stworzyłem nowe rozwiązanie WebForms i usunąłem bootstrap tylko po to, aby upewnić się, że żadne style CSS nie kolidują z moim kodem. Oto, co zrobiłem, aby odtworzyć twój problem.

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> 

Jak widać, mam zdefiniowany jeden TemplateField bez dodatkowych stylów CSS.

kodzie:

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

jestem po prostu powrocie 10 fikcyjnych elementów do tworzenia siatki demo. Nic niezwykłego.

Wynika to w Chrome i Internet Explorer:

Jak widać, nagłówki są wyśrodkowane domyślnie. Dotyczy to zarówno -BoundFields, jak i TemaplateFields.

Jeśli tak nie jest, zalecam sprawdzenie, czy inne style stykają się z Twoimi stylami. Wiem, że Bootstrap 3 domyślnie text-align: center dla th elementów (Bo właśnie zaznaczone)

Answer 3

przez prawo, temStyle-HorizontalAlign = "Centrum" powinno działać. Należy pamiętać, że style gridview są dziedziczone z nadrzędnego arkusza stylów. Znaczenie, twój gridview ma co najmniej jeden styl macierzysty, który nie jest wyrównany. To powinno być miejsce, w którym pojawia się twój problem.

Answer 4

Znacznik <center> jest przestarzałe w HTML 4.01 i nie są obsługiwane w HTML5 - kod działa Ci napisali może być "CSS-ified" w następujący sposób:

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

(Uwaga: Panel jest odpowiednikiem ASP.Net z <div>.)

tutaj Nieznaczna poprawa jest, aby zdefiniować klasę CSS dla stylu dzięki czemu może być ponownie użyty w innym miejscu:

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

... i odwołać go z panelu zamiast używania stylu inline:

<asp:Panel CssClass="center">