Center text in HTML (with images)

Table of contents:

Center text in HTML (with images)
Center text in HTML (with images)
Anonim

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

Steps

Method 1 of 2: Using CSS

2974143 7

Step 1. Open the text file where you describe your styles

Now that the 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 don't have a separate CSS file, the codes are at the top of the HTML document between the '' and '' tags.

  • If the - and tags are not there yet, you can place them directly below the tag in the following way:
  •    
    
2974143 8

Step 2. Create a class that centers text

The tag tells your HTML document which specific section this class pertains to. Type the following between the 'style' tags, making sure to press ↵ Enter twice after the first line:

    div.a { }

2974143 9

Step 3. Add the text-align property

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

        
    
2974143 11

Step 4. Add the appropriate div tag to the text you want to center

You do this by typing the tag above this text and closing it with a tag below this text. For example, if you want to center a title the paragraph below it, it would look like this:

    
    
    
    

    Welcome to my website

    This website is mainly meant to provide information about things.

2974143 12

Step 5. Use the div.a tag to center other elements

If you want to center another element, such as content between the tags), type before this element and after it. Since you have already defined the 'div.a' as the centering css code, these elements are now also centered.

    
    
    
    

    Donations are welcome

    please

2974143 13

Step 6. Check your document

While the text on your web page will of course be different, it will look something like this:

       
    
    
    
    

    Welcome to my website

    This website is mainly intended to provide information about things.

    Donations are welcome

    please

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

Step 1. Open your HTML document

This method describes how to use the deprecated tag. This method will probably still work in some browsers, but it's best not to rely on it too much.

2974143 2

Step #2. Find the text you want to center

Scroll down through your document until you find the title, paragraph, or other text you want to center.

2974143 3

Step 3. Place the 'center' tag on either side of the text

The code looks like this text. Here "text" is the text to be centered. Place the 'center' tags outside of existing tags, if there are other tags in this text, such as '' for a paragraph.

    Welcome to my website

    Make yourself comfortable!
2974143 4

Step 4. Check your HTML document

It should look something like this:

     
    
    

    Welcome to my website

    Make yourself comfortable!
    This website is mainly intended to provide information about things.

Popular by topic