TemplateField öğesinin başlık metni nasıl merkezi olarak hizalanır?

Question

TemplateField s ile GridView kullanıyorum.

TemplateField öğesinin başlığını metne hizalamak için HeaderStyle-HorizontalAlign="Center" kullanmayı denedim ancak çalışmıyor.

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

TemplateField öğesinin başlık metnini nasıl ortalayabilirim?

ItemStyle-HorizontalAlign="Center" Merkezi hizalama, TemplateField öğelerini hizalamada doğru şekilde çalışıyor.

Herhangi bir yardım gerçekten takdir edilecektir!

Answer 1

ben HeaderTemplate bir <center> etiketi kullanılır hangi sorunu çözdü bir yol bulduk (Sadece işaretli Çünkü) o Bootstrap th elemanları text-align: center 3 varsayılan biliyorum temStyle-HorizontalAlign = "Merkez" çalışıyor olmalı. Sadece gridview stillerinizin ana stil sayfasından miras aldığını unutmayın. Anlamı, ızgara görünümünüzün, certer hizalaması olmayan en az bir ana stili vardır. Sorununuzun geldiği yer bu olmalı.

Answer 2

Yeni bir WebForms çözümü oluşturdum ve yalnızca css stillerinin koduma müdahale etmediğinden emin olmak için önyüklemeyi kaldırdım. Sorunu yeniden üretmek için yaptığım şey bu.

aspx: Gördüğünüz gibi

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

, ben herhangi bir ek css stilleri kalmadan tek bir TemplateField tanımladınız.

CodeBehind: Ben sadece bir demo ızgara oluşturmak için 10 kukla öğeleri iade ediyorum

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

. Sıradışı bir şey yok. Gördüğünüz gibi

, başlıklar, varsayılan olarak ortalanır:

Bu

Krom ve Internet Explorer sonucudur. Ve bu hem -BoundFields ve TemaplateFields için.

Bu sizin için uygun değilse, başka stil sayfalarının stillerinizi etkileyip etkilemediğini kontrol etmenizi öneririz. Sağ tarafından

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

Answer 3

: Ben

Answer 4

<center> etiketi HTML 4.01 önerilmiyor ve HTML5 desteklenmeyen - Yayınladığınız çalışma kod olabilir "CSS-ified" şöyle:

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

(Not: Panel ASP.Net eşdeğerdir <div>.)

burada hafif bir iyileşme başka yerde tekrar kullanılabilir, böylece stil için bir CSS sınıfı tanımlamaktır:

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

... ve satır içi stil kullanmak yerine panelinden başvuru:

<asp:Panel CssClass="center">