Knowledgebase

How to center and change the alignment of page titles and subheadings in MediaWiki

If you want to change the text alignment of page titles and section headings, you can do that with simple CSS (Cascading Style Sheets) modifications to the skin(s) that you use. By default, page titles and subheadings/section headings are aligned to the left. If you want to, you can center them or you can also align them to the right.

CSS modifications are performed by adding the code to the MediaWiki:Common.css page of your site (e.g. yourdomain.com/index.php/MediaWiki:Common.css); this will affect all installed skins, provided the ID that you've used in the CSS code is the one with which page titles are defined in the particular skins. To change only a particular skin, you can add the code only to its own CSS page (e.g. MediaWiki:Vector.css for the Vector skin). For more general information check out the article on how to make CSS modifications in MediaWiki.

The basic code for centering any text element is the same; it has the form:

element { text-align: center; }

where you have to replace element with the actual tag and/or ID with which the particular element is defined in the HTML of the page. In case you want to align the element to the right, you only have to put right instead of center (e.g. element { text-align: right; }).

You can change the alignment of titles and subheadings on all pages, on the pages only of a selected namespace(s) or only on particular pages.

Change the Alignment of Page Titles and Section Headings on All Pages

In most skins, if not all, the page title is defined with the h1 tag. So this CSS modification:

h1 { text-align: center; }

should center the page titles of all pages. However, depending on the particular skin, there may be other text elements which are defined with the h1 tag which means that they will be affected too. For example, some skins have the site title also specified with the h1 tag and so in this case both the site title and page titles will be centered. This is skin-specific. You can try the code and see if anything else except the page titles is affected.

Section headings are generally defined with the tag h2; subheadings of section headings with h3, and so on to h6. So, for example, to center all subheadings of page titles you can use:

h2 { text-align: center; }

The same things that we mentioned about page titles are also valid for section headings. Depending on the skin, there might be other elements that are defined with any h2 to h6 tags. If there are such elements they'll be affected by the change too. For instance, in many skins the labels of the navigation menus in the left column (e.g. Tools, Navigation, etc.) are defined with h3.

In cases when other elements besides the page title and section headings are affected, you can use in the CSS code the ID or class with which the page content is defined so that the change applies only to the elements within the page content. The IDs are skin-specific. Here we'll go through the skins that come prepackaged with MediaWiki: Vector, MonoBook, Modern, Cologne Blue. Note that with all four of these skins the above listed code changes will also work fine.

All the examples we give are for centering, but if you want to, you can change the alignment in the code to right (or left).

Vector and MonoBook

#content h1 { text-align: center; } - centers page titles.

#content h2 { text-align: center; } - this affects page section headings. These are the headings that are hierarchically direct subheadings of the page title. For subheadings of subheadings, for instance, replace h2 with h3.

Modern

#mw_header h1 { text-align: center; } - for centering page titles.

#mw_content h2 { text-align: center; } - for changing the alignment of page section headings. As usual, for changing the different levels of subheadings you can replace h2 with h3, h4, and so on.

Cologne Blue

#article h1 { text-align: center; } - for page titles.

#article h2 { text-align: center; } - for section headings that are direct subheadings of page titles. As with the other skins, for changing the alignment of subheadings that are further down hierarchically you can use h3, h4, etc.

Change the Alignment of Titles per Namespace

Whenever you make CSS changes, instead of applying them to all pages, you can apply them only to the pages from a selected namespace or namespaces. To do this, in front of the code for changing the alignment on all pages you only have to add some code specifying to which namespace it should be applied. For example, the following:

.ns-0 h1 { text-align: center; }

will center page titles only on the pages that belong to the namespace with ID number 0; this is the Main namespace that contains the articles. Pages from other namespaces (e.g. discussion pages, personal user pages, etc.) will not be affected. For more information on the default namespaces and their corresponding ID numbers check out the reference list of MediaWiki namespaces.

Change the Alignment of Titles per Page

If you want to, you can change the alignment of page titles and section headings only on particular pages. To do this, in front of the code for changing the alignment for all pages you have to put some additional code specifying to which page it should be applied. For example, this:

body.page-Example_Page h1 { text-align: center; }

will center the page title only of a page titled Example Page. Separate the words in the title with underscores _. If the page belongs to a namespace other than the Main one, you also have to include the namespace prefix in front of the page name and separate them with underscores (e.g. Talk_Example_Page).

Other articles with CSS modifications in our knowledge base that you may find helpful:

Was this answer helpful?

 Print this Article

Also Read