How to Centre ("Center") Text on Your Web Page with CSS

Align Text in the Centre of a Page, Block or Box

How to Centre ("Center") Text on Your Web Page with CSS

by Christopher Heng,

I recently received an email from a visitor asking me how she could centre ("center" in US English) some text in the middle of a box. This article answers that question, along with related ones that I have been asked over the years about aligning text in the centre of a page.

Note that this article only deals with the specific query mentioned above. It does not deal with how to centre a block (eg a box) on your page without centring ("centering") the text inside. Nor does it address how to centre an image. Please read the articles linked to in the previous two sentences for those situations.

The CSS for Aligning Text

Aligning text is very straightforward, since CSS ("What is CSS?") provides the text-align property specifically for this.

For example, the following CSS rule put all headers using the <h1> tag in the middle of the block they are in.

h1 { text-align: center ; }

Alternatively, if you only want a particular (say) paragraph to have text aligned in the centre, give it a class or identifier and set its text-align property to center. For example, if your paragraph has a class of "weeklyhighlights", that is, it has opening tag of <p class="weeklyhighlights">, the CSS code to centre it is as follows.

.weeklyhighlights { text-align: center ; }

The same goes for those who have a DIV block (or a box) which has words that you want to centre. Assuming that your DIV block has an id of "centrethis", that is, the block has an opening tag of <div id="centrethis">, the CSS to centre its contents will be:

#centrethis { text-align: center ; }

For those of you who are not able to add CSS code to the <head> section of your web page or style sheet, such as people who post using certain blog software, or those who use a blog host that doesn't allow you to easily modify the style sheet, you can directly modify the HTML to include the relevant CSS. Let's say you want to put the following paragraph in the centre of a page or column.

Read for useful webmaster tips and tricks.

Change the opening <p> tag to the following:

<p style="text-align: center;">

The rest of the code and words can remain as they are. The HTML code for that block will therefore look like this:

<p style="text-align: center;">
Read for useful webmaster tips and tricks.

That's it. Yes, it's that simple.

Browser Compatibility

All modern web browsers, and even many old ones such as the long obsolete IE 6, support text-align: center.

Copyright © 2017 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Centre ("Center") Text on Your Web Page with CSS

Link to Us
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Web Hosting
Perl / CGI
.htaccess / Apache


Free webmasters and programmers resources, scripts and tutorials Free How-To Guides
Site Design Tips at
Find this site useful?
Please link to us.