By default, article headings in Document360 are left-aligned. You can center-align all H2, H3, and H4 headings across your knowledge base site using a single CSS snippet, useful for documentation styles that use a centered layout, or to match a brand aesthetic that places headings at the center of the page.
NOTEThis CSS change applies to all H2, H3, and H4 headings across every article on your knowledge base site. It cannot be scoped to a single article or a specific heading level without modifying the snippet.
When to use this
Use this customization when you want to:
- Apply a centered heading layout consistently across all articles site-wide.
- Match a brand or design system that uses centered typographic alignment.
- Override the default left-aligned heading style without editing individual articles.
Before you begin
- You need access to Settings () > Knowledge base site > Site customization > Custom CSS & JavaScript in the Knowledge base portal.
- This change is site-wide and irreversible without removing the snippet. If you only want to centre specific headings rather than all of them, consider applying inline styles in individual articles instead.
How to center-align headings
-
Navigate to Settings (
) > Knowledge base site > Site customization > Custom CSS & JavaScript in the Knowledge base portal.
-
From the left navigation pane, select the CSS tab and paste the following snippet:
H2,H3,H4{
text-align:center;
}
-
Click Save.

All H2, H3, and H4 headings across your knowledge base site now display with center alignment.
Best practices
- Scope the snippet if you only need specific headings centered. If you want only H2 headings centred and not H3 or H4, remove the unwanted selectors — for example, use
H2 { text-align: center; }alone. - Test across article types after saving. Center-aligned headings can look different in articles with wide prose, tables, or code blocks. Review a range of articles before publishing the change.
- To revert, delete the snippet. If center alignment does not work for your content, navigate back to Custom CSS & JavaScript, select and delete the snippet from the CSS tab, and click Save. Headings return to left alignment immediately.