How to Center Text in HTML

PDF download Download Article
PDF download 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]

Method 1
Method 1 of 2:

Using CSS

PDF download Download Article
  1. 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]
    • 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 
 >
  2. 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
  3. 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 
 >
  4. 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 
 >
  5. 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 
 >
  6. Though the content will vary, your document should look something like this: [3] 
       <! 
 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 
 >
    7. Advertisement
Method 2
Method 2 of 2:

Using the Center Tag in HTML

PDF download Download Article
  1. 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.
  2. Scroll down until you find the header, paragraph, or other text that you want to center.
  3. 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 
 >
  4. Your document should look something like this: [4] 
       <!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 
 >
    5. Advertisement

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
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
      Name
      Please provide your name and last initial
      Submit
      Thanks for submitting a tip for review!

      You Might Also Like

      How to
      Change Text Color in HTML and CSS
      Add a Background Image to a Website: Step-by-Step Tutorial
      How to
      Insert Spaces in HTML
      How to
      Use Font Color Tags in HTML
      4 Ways to Add a Link to a Picture
      How to
      Run a HTML File in Visual Studio Code
      How to
      Create a Simple Web Page with HTML
      How to
      Write HTML Code
      How to
      Run a HTML File
      How to
      Insert Images with HTML
      How to
      Change the Button Color in HTML
      How to
      Open HTM Files
      Simple Ways to Find the Hex Code of Any Color on Your Computer
      How to
      Resize iFrames in HTML
      Advertisement

      References

      1. ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center
      2. ↑ https://www.w3schools.com/css/css_align.asp
      3. ↑ https://www.w3schools.com/cssref/pr_text_text-align.asp
      4. ↑ https://www.w3schools.com/tags/tag_center.asp

      About This Article

      In other languages
      Thanks to all authors for creating a page that has been read 243,017 times.

      Is this article up to date?

      Advertisement