How to Center Text on HTML

X

This article is co-authored by a team of editors and trained researchers who confirm the accuracy and completeness of the article.

The wikiHow Content Management team carefully monitors the work of editors to ensure that every article is up to a high standard of quality.

This article has been viewed 87,497 times.

This wikiHow teaches you how to center text on an HTML website using the Cascading Style Sheets (CSS) programming language. Centering text on HTML is done with the <center> tag, but this tag is considered obsolete and no longer works in most browsers. ^{[1] X Research Source}

Table of Contents

By CSS

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/d/da/2974143-7.jpg/v4-728px-2974143-7.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/d/da/2974143-7.jpg/v4-728px-2974143-7.jpg”,”smallWidth”:460,”smallHeight”:343,”bigWidth”:728,” bigHeight”:543,”licensing”:”<div class=”mw-parser-output”></div>”}

Open the file containing the CSS style. Although the <center> tag is obsolete, you can still create new elements to add to any section of the page to center text within their boundaries. If you don’t have a separate file for CSS, you need to define the style at the top of the HTML file, between the “<style>” and “</style>” tags. ^{[2] X Research Source}

If you don’t have <style> and </style> tags yet, you need to add them directly below the <body> tag at the top of the file like this:

 <!DOCTYPE html> < html > < body > < style > </ style >

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/e/ef/2974143-8.jpg/v4-728px-2974143-8.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/e/ef/2974143-8.jpg/v4-728px-2974143-8.jpg”,”smallWidth”:460,”smallHeight”:349,”bigWidth”:728,” bigHeight”:553,”licensing”:”<div class=”mw-parser-output”></div>”}

Create a layer to center the text. The <div> tag will require the HTML document to reference specific text, so you need to create a class for this tag. Type the following in the space between the “style” tag, don’t forget to press ↵ Enter twice after the first line:

 div . a { }

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/9/97/2974143-9.jpg/v4-728px-2974143-9.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/9/97/2974143-9.jpg/v4-728px-2974143-9.jpg”,”smallWidth”:460,”smallHeight”:341,”bigWidth”:728,” bigHeight”:540,”licensing”:”<div class=”mw-parser-output”></div>”}

Add the text-align property. Type text-align: center; into the space between the two curly braces in the div.a section. The current header will look like this:

 <! DOCTYPE html > < html > < body > < style > div . a { text-align : center ; } </ style >

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/7/7e/2974143-11.jpg/v4-728px-2974143-11.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/7/7e/2974143-11.jpg/v4-728px-2974143-11.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,” bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Add the appropriate div tag to the text that needs to be centered. Proceed by placing a <div class="a"> tag above the text you want to center, and closing it with a </div> tag below the text you want to center. For example, to center the title and opening paragraph, you’d type the following:

 < div class = "a" > < h1 > Welcome to My Website </ h1 > < p > This website is preeminent for the purpose of providing information about things .</ p > </ div >

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/8/87/2974143-12.jpg/v4-728px-2974143-12.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/8/87/2974143-12.jpg/v4-728px-2974143-12.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,” bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Use the div.a tag to center other areas. If you want to center another element (e.g. content between tags like <p></p> and <h2></h2> ), type <div class="a"> before the text and </div> after that. Since you specified “div.a” as the centered command, this text will be centered similarly to the previous section:

 <style> div . _ _ a { text-align : center ; } </ style > < div class = "a" > < h2 > Donations Welcome </ h2 > < p > please </ p > </ div >

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/0/0d/2974143-13.jpg/v4-728px-2974143-13.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/0/0d/2974143-13.jpg/v4-728px-2974143-13.jpg”,”smallWidth”:460,”smallHeight”:341,”bigWidth”:728,” bigHeight”:540,”licensing”:”<div class=”mw-parser-output”></div>”}

Review the document. While the content may vary, your document should generally look something like this: ^{[3] X Research Sources}

 <! DOCTYPE html > < html > < body > < style > div . a { text-align : center ; } </ style > < div class = "a" > < h1 > Welcome to My Website </ h1 > < p > This website is preeminent for the purpose of providing information about things .</ p > </ div > < div class = "a" > < h2 > Donations Welcome </ h2 > < p > please </ p > </ div > </ body > </ html >

Using the center tag in HTML

Open the HTML document. This method describes how to use the HTML <center> tag (also now obsolete). As of December 2018, this tag still works on some web browsers, but it’s still not recommended to use it in the long term.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/5/53/2974143-2.jpg/v4-728px-2974143-2.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/5/53/2974143-2.jpg/v4-728px-2974143-2.jpg”,”smallWidth”:460,”smallHeight”:348,”bigWidth”:728,” bigHeight”:551,”licensing”:”<div class=”mw-parser-output”></div>”}

Specify the text that you want to center. Scroll down until you find the title, paragraph, or other text you want to center.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/c/cd/2974143-3.jpg/v4-728px-2974143-3.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/c/cd/2974143-3.jpg/v4-728px-2974143-3.jpg”,”smallWidth”:460,”smallHeight”:344,”bigWidth”:728,” bigHeight”:544,”licensing”:”<div class=”mw-parser-output”></div>”}

Add a “center” tag to both ends of the text. This center tag has the format <center>text</center> , where “text” is the text that needs to be centered. If the text already has tags inside (for example, “<p></p>” for paragraphs), the “center” tag can be outside of those that already exist:

 < center >< h1 > Welcome to My Website </ h1 ></ center > < center > Make yourself at home! </ center >

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/c/cb/2974143-4.jpg/v4-728px-2974143-4.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/c/cb/2974143-4.jpg/v4-728px-2974143-4.jpg”,”smallWidth”:460,”smallHeight”:343,”bigWidth”:728,” bigHeight”:543,”licensing”:”<div class=”mw-parser-output”></div>”}

Review the HTML document. The document should now look like this: ^{[4] X Research Sources}

 <!DOCTYPE html> < html > < body > < h1 >< center > Welcome to My Website </ center ></ h1 > < center > Make yourself at home! </ center > < p1 > The purpose of this website is to display information about things. < / p1 > </body> < / html >

Steps

By CSS

Using the center tag in HTML

Related Posts