Differences between HTML <center> Tag and CSS “text-align: center;” Property

If you are designing a simple web page, then not much difference is noticeable, but it is very necessary to understand the basic differences between these two. Since we are only concerned with the text, these elements do not have separate meanings.

HTML <center> tag: The <center> tag in HTML is used to set the align of text into the center. This tag is not supported in HTML 5. CSS property is used to set the alignment of the element instead of the center tag in HTML 5. It is a block-level element that is used to display the text enclosed in the tag in the center horizontally. Most common browsers such as Google Chrome, Mozilla Firefox, Internet Explorer support this tag.

  • Example: The below code was earlier used in HTML 4 and older versions to align text to the center.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
      
    <head
        <title>HTML center tag</title
          
        <style
            h1 { 
                color:green; 
            
        </style
    </head
      
    <body
        <center
            <h1>GeeksforGeeks</h1
            <h2>HTML <center> Tag</h2
              
            <p>
                GeeksforGeeks: 
                A computer science portal for Geeks.
            </p
        </center
    </body
      
    </html>

    chevron_right

    
    

  • Output:

CSS “text-align: center;” Property: It is a CSS property used to align the text in the center, which can be used in many components, including tables, buttons, etc.



  • Example: The implementation of “text-align: center” property is given below:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
      
    <head
        <title>
            text-align: center property
        </title
          
        <style
            h1 { 
                color:green; 
            
        </style
    </head
      
    <body
        <h1 style="text-align:center;">
            GeeksforGeeks
        </h1
          
        <h2 style="text-align:center;">
            CSS "text-align:center;" Property
        </h2
          
        <p style="text-align:center;">
            GeeksforGeeks: 
            A computer science portal for Geeks.
        </p
    </body
      
    </html>       

    chevron_right

    
    

  • Output:

You can notice both the outputs are the same, but in the case of HTML5 code, we use inline CSS to align our text to the center. In the previous code for HTML4 and older versions, we use specifically the <center> tag.

Differences between HTML <center> tag and CSS “text-align: center;” property:

HTML <center> tag CSS “text-align: center;” Property
HTML <center> tag is a block level element. CSS “text-align: center;” property is an inline element.
It is best to attach it to a section of a web page. It is best to attach it to a small section of a line in a web page.
HTML 5 does not support the center tag, and also the upcoming versions of HTML would not support it. HTML 5 supports the “text-align: center;” property, and also the upcoming versions of HTML will support it.
This tag should use to wrap a section, for centering that section. This tag should use to wrap any specific word that you want to center on your webpage.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : Akanksha_Rai