Column Header Alignment In Kendo UI For JQuery | Telerik Forums

skip navigation

• Kendo UI for jQuery

  Product Bundles

  DevCraft

  All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:

  • MCP Servers
  • Embedded Reporting
  • Document Processing Libraries
  • SSO Account Sign-in

  Web

  Kendo UI UI for Angular UI for Vue UI for jQuery KendoReact UI for Blazor UI for ASP.NET Core UI for ASP.NET MVC UI for ASP.NET AJAX

  Mobile

  UI for .NET MAUI

  Document Management

  Telerik Document Processing

  Desktop

  UI for .NET MAUI UI for WinUI UI for WinForms UI for WPF

  Reporting

  Telerik Reporting Telerik Report Server

  Testing & Mocking

  Test Studio Telerik JustMock

  CMS

  Sitefinity

  AI Productivity Tools

  MCP Servers

  UI/UX Tools

  ThemeBuilder Design System Kit Templates and Building Blocks

  Debugging

  Fiddler Fiddler Everywhere Fiddler Classic Fiddler Everywhere Reporter FiddlerCore

  Free Tools

  KendoReact Free VB.NET to C# Converter Testing FrameworkView all products

• Overview
• Frameworks
  • jQuery
  • Angular
  • React
  • Vue
• Demos
• Roadmap
  • What's New
  • Roadmap
  • Release History
• Docs & Support

  Support and Learning

  • Support and Learning Hub
  • First Steps
  • Documentation
  • Demos
  • Virtual Classroom
  • Forums
  • Feedback Portal
  • Blogs
  • Accessibility
  • Submit a Ticket
  • Trust Center

  Productivity and Design Tools

  • ThemeBuilder
  • Design System Documentation
  • Visual Studio Code Extensions
  • Embedded Reporting
• Pricing

• Shopping cart
• Login
• Contact Us
• Try now

close mobile menu Telerik Forums / Kendo UI for jQuery Column Header alignment 3 Answers 10286 Views Grid Troy Top achievements Rank 1 Troy asked on 27 Jun 2012, 08:18 PM How can I center align the text in my column headers? Add a comment Submit comment Cancel

3 Answers, 1 is accepted

Sort by Score Date 0 Accepted Iliana Dyankova Telerik team answered on 28 Jun 2012, 04:46 PM Hello Troy,

You could use a CSS selector with the widget’s specific CSS class for customizing the appearance of any particular widget. The needed CSS classes are listed in this topic from our online documentation. For example this snippet can be used for centering the text in the grid column headers:

.k-header .k-link{ text-align: center; }

I hope this information helps.

Greetings, Iliana Nikolova the Telerik team Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now! Troy Top achievements Rank 1 commented on 28 Jun 2012, 04:53 PM Thanks so much! Update comment Cancel Mark Top achievements Rank 1 commented on 26 Apr 2016, 05:04 PM What if you only want to align certain column headers, not all of them...??? Thanks Update comment Cancel Add a comment Submit comment Cancel 1 Ivan Zhekov Telerik team answered on 29 Apr 2016, 11:48 AM Mark, you can easily do so by specifying the "headerAtrributes" of the desired columns, just like in this example: http://dojo.telerik.com/@joneff/aQImE. Note that due to CSS specificity, if you use a single class name, you will need to have !important rule, or alternatively a more specific selector. If you use inline styles, you don't have to worry about specificity. Regards, Ivan Zhekov Telerik Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now! Mark Top achievements Rank 1 commented on 29 Apr 2016, 03:52 PM Perfect, thanks! Update comment Cancel Daniel Top achievements Rank 1 commented on 14 Jan 2022, 08:35 PM | edited How do you format groupColumnHeaders? The example below shows the overall headers being modified with headerAttributes but not the headers of each group.Kendo UI Snippet | Kendo UI Dojo (telerik.com) Update comment Cancel Georgi Denchev Telerik team commented on 19 Jan 2022, 09:58 AM

Hi, Daniel,

Thank you for the provided Dojo.

There's no built-in configuration that can manipulate the attributes of the groupHeaders like there is one for the Grid header. You can use the dataBound event to update the attributes of the <td> element of the particular group header.

dataBound: function() { let groupHeaders = this.element.find(".k-grouping-row"); groupHeaders.each(function(i, header) { // add an attribute to the second cell of each group header. $(header).find("td:eq(1)").attr("style", "font-weight: bold; text-align:right"); }); }

Updated Dojo:

https://dojo.telerik.com/@gdenchev/iyUnAyon

Update comment Cancel Add a comment Submit comment Cancel 0 Stoyan Telerik team answered on 21 Mar 2022, 01:09 PM

Hi all,

I'd like to point out that with the updated rendering from R1 2022 the display property of the Grid's header has changed to flexbox (was block previously). Therefore to align the text of the header you need to use the justify-content property:

.k-header .k-link{ justify-content: center; }

Regards, Stoyan Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Add a comment Submit comment Cancel Answer this question Drag and drop files here or browse to attach... Browse for files to attach... Supported file types: PNG, JPG, JPEG, ZIP, RAR, TXT. Max total file size - 20MB. Submit answer Cancel Tags Grid Asked by Troy Top achievements Rank 1 Answers by Iliana Dyankova Telerik team Ivan Zhekov Telerik team Stoyan Telerik team Share this question or Copy link