How to Center Text in HTML

Written by Nicole Levine, MFA

Last Updated: January 29, 2023

This wikiHow 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]
X
Research 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]
X
Research 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:
6
Review your document. Though the content will vary, your document should look something like this:^{[3]
X
Research source}

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:
4
Review your HTML document. Your document should look something like this:^{[4]
X
Research source}

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 wikiHow 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 wikiHow
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 wikiHow 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 wikiHow
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 wikiHow 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 wikiHow
Yes No

Not Helpful 0 Helpful 2