Download Article
Download Article
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
Steps
-
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:
<!DOCTYPE html> < html > < body > < style > </ style >
-
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:
div . a { }
Advertisement -
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:
<! DOCTYPE html > < html > < body > < style > div . a { text-align : center ; } </ style >
-
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:
< div class = "a" > < h1 > Welcome to My Website </ h1 > < p > This website is primarily for the purpose of providing information about things .</ p > </ div >
-
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:
< style > div . a { text-align : center ; } </ style > < div class = "a" > < h2 > Donations Welcome </ h2 > < p > please </ p > </ div >
-
Review your document. Though the content will vary, your document should look something like this: [3] X Research 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 >
Advertisement
-
1Open 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.
-
Find the text you want to center. Scroll down until you find the header, paragraph, or other text that you want to center.
-
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:
< center >< h1 > Welcome to My Website </ h1 ></ center > < center > Make yourself at home! </ center >
-
Review your HTML document. Your document should look something like this: [4] X Research 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 >
Advertisement
Community Q&A
Search
-
QuestionHow do I put a tab or space before any word in HTML?Community AnswerYou 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.
-
QuestionHow do I center an image in HTML?Community AnswerTo 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.
-
QuestionHow do I center-align a video I have inserted from my media library? I've made several stabs at it but none successful.Free EagleCommunity AnswerSet 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.
Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
Advertisement
Video
Tips
Submit a Tip
All tip submissions are carefully reviewed before being published
Thanks for submitting a tip for review!
References
About This Article
Thanks to all authors for creating a page that has been read 240,570 times.
Advertisement
