How to Center Text in HTML

This How.com.vn teaches you how to center text in an HTML website using Cascading Style Sheets (CSS). Centering in HTML used to be done with the <center> tag, but that tag is now considered obsolete and no longer works in most browsers.^{[1]XResearch source}

Method 1

Method 1 of 2:

Using CSS

Download Article

1
Open the file that contains your CSS styles. Though the <center> tag is obsolete, you can create a new element to add to any part of a page to center text within its boundaries. If you don't have a separate file for your CSS, you'll find the styles at the top of the HTML file between the "<style>" and "</style>" tags.^{[2]XResearch source}
- If you don't already have <style> and </style> tags, add them directly below <body> at the top of the file like this:
2
Create a class that centers text. The <div> tag will tell your HTML document to reference a specified section of text, so you'll create a class for that tag. Type the following into the space between the "style" tags, making sure to press ↵ Enter twice after the first line:
Advertisement
3
Add the text-align property. Type text-align: center; into the space between the two curly brackets in the div.a section. The header should now look like this:
4
Add the proper div tag to text that should be centered. You'll do this by placing the <div class="a"> tag above the text you want to center and closing with a </div> tag below the text you want to center. For example, to center a header and its paragraph text, you would enter the following:
5
Use the div.a tag to center other areas. To center another element (e.g., content between tags like <p></p> and <h2></h2>), type <div class="a"> before the item, and </div> after it. Since you already have "div.a" specified as the centering command, this will center the text just like it did before:

How.com.vn English: Step 6 Review your document.

Though the content will vary, your document should look something like this:^{[3]XResearch source}

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

Method 2

Method 2 of 2:

Using the Center Tag in HTML

Download Article

1
Open your HTML document. This method describes how to use the HTML <center> tag, which is now obsolete. As of December 2018, this tag may still work in some web browsers, however, it's not advised to rely on this tag in the long run.
Scroll down until you find the header, paragraph, or other text that you want to center.
3
Add the "center" tag to each side of the text. The center tag is in the format <center>text</center> where "text" is your text. If your text has tags on it (e.g., "<p></p>" for paragraph text), the "center" tags can go outside the existing tags:

How.com.vn English: Step 4 Review your HTML document.

Your document should look something like this:^{[4]XResearch source}

<!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>

Community Q&A

Search

Add New Question

Question
How do I put a tab or space before any word in HTML?
Community Answer
You can simply add the space in the code. If you want the result to turn out with exactly the same spacing and line breaks as in the code itself, wrap the element in a tag.
Thanks! We're glad this was helpful.
Thank you for your feedback.
If How.com.vn has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission.Support How.com.vn
Yes No
Not Helpful 6 Helpful 10
Question
How do I center an image in HTML?
Community Answer
To center an image in HTML, you can use the "align" attribute. But in HTML 5, you can't use the align attribute; you've got to use CSS class instead.
Thanks! We're glad this was helpful.
Thank you for your feedback.
If How.com.vn has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission.Support How.com.vn
Yes No
Not Helpful 6 Helpful 5
Question
How do I center-align a video I have inserted from my media library? I've made several stabs at it but none successful.
Free Eagle
Community Answer
Set your video into a perimeter. An Example of this would be: Replacing the YouTube URL with the URL where your media/video is stored. You can move your video to any where you want by changing the position of the top or left perimeters of the first line of the code.
Thanks! We're glad this was helpful.
Thank you for your feedback.
If How.com.vn has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission.Support How.com.vn
Yes No
Not Helpful 0 Helpful 2