Center text in HTML

Author: Tamara Smith
Date Of Creation: 28 January 2021
Update Date: 1 July 2024
Anonim
CSS Center text Horizontal and Vertical
Video: CSS Center text Horizontal and Vertical

Content

This wikiHow teaches you how to center text in an HTML website. We use CSS (Cascading Style Sheets or style sheets) for this. We used to center in HTML using the center>tag, but this no longer works in most browsers.

To step

Method 1 of 2: Using CSS

  1. Open the text file in which you describe your styles. Now the center>tag is no longer used, create a new element in this file that will center text in certain areas of your HTML document. If you do not have a separate CSS file, the codes are at the top of the HTML document between the "style>" and "/ style>" tags.
    • As the style>- and / style>tags are not there yet, you can put them directly under the body>tag in the following way:
    • ! DOCTYPE html> html> body> style> / style>

  2. Create a class that centers text. The div>tag tells your HTML document which specific section this class pertains to. Type the following between the "style" tags, making sure to click twice ↵ Enter after the first line:

      div.a {}

  3. Add the text-alignproperty. Type text-align: center; between the braces in the div.a-section. The "header" now looks like this:

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

  4. Add the correct one divtag to the text you want to center. You do this through the div>tag above this text and closing it with a / div>tag below this text. For example, if you want to center a title and the paragraph below it, it looks like this:

      div> h1> Welcome to my website / h1> p> This website is mainly to provide information about things./p> / div>

  5. Use the div.atag to center other elements. When you want to center another element, such as content between the tags p> / p> and h2> / h2>), you type div> for this element and / div> afterwards. Since you have already defined the "div.a" as the centering CSS code, these elements are now also centered.

      style> div.a {text-align: center; } / style> div> h2> Donations are welcome / h2> p> please / p> / div>

  6. Check your document. Although the text on your webpage is of course different, it should look something like this:

      ! DOCTYPE html> html> body> style> div.a {text-align: center; } / style> div> h1> Welcome to my website / h1> p> This website is mainly for providing information about things. / p> / div> div> h2> Donations are welcome / h2> p> please / p > / div> / body> / html>

Method 2 of 2: Using the "center" tag in HTML

  1. Open your HTML document. This method describes how to get the obsolete center>tag. This method may still work in a number of browsers, but it is best not to rely on it too much.
  2. Find the text you want to center. Scroll down your document until you find the title, paragraph, or other text you want to center.
  3. Place the "center" tag on either side of the text. The code looks like this center> text / center>. Here, "text" is the text to be centered. If there are other tags in this text, such as "p> / p>" before a paragraph, place the "center" tags outside of existing tags.

      center> h1> Welcome to my website / h1> / center> center> Make yourself comfortable! / center>

  4. Check your HTML document. It should look something like this:

      ! DOCTYPE html> html> body> h1> center> Welcome to my website / center> / h1> center> Make it easy for yourself! / Center> p1> This website is mainly to provide information about things./p1> / body> / html>