heading tag won't work in alignment attribute-CodePudding

<html> 
    <head>
        <title> my's info </title>
    </head>
    <body>
        <p align="center">
            <h1>ABOUT ME</h1> 
        </p>
        <p> this is a paragraph  </p>
        <h3> this is a heading </h3>
        <p> this is a paragraph </p>

    </body>
</html>

why does not the ABOUT ME is not align in the center when i used the heading tag? does heading tag doesn't work in alignments ?

CodePudding user response：

The <p> tag can only contain inline elements. The header tags are block-level elements, and cannot go inside <p> tags even when you style them to display inline.

So in this case your <h1> is not considered in your paragraph. You can see that by adding border attributes to it.

CodePudding user response：

It works like this. heading tags are supposed to mark that as heading and some specific styling by default. center property always works related to div it inside or section.

<html> 
    <head>
        <title> my's info </title>
    </head>
    <body>
        <div style="text-align:center;">
            <h1>ABOUT ME</h1> 
        </div>
        <p> this is a paragraph  </p>
        <h3> this is a heading </h3>
        <p> this is a paragraph </p>

    </body>
</html>

CodePudding user response：

See the difference between inline and block elements.

<html> 
    <head>
        <title> my's info </title>
    </head>
    <body>
         <!-- Inline element -->
        <p align="center">
            <h1>ABOUT ME</h1> 
        </p>
        <!-- Block element -->
        <div align="center">
            <h1>ABOUT ME</h1> 
        </div>
        <p> this is a paragraph  </p>
        <h3> this is a heading </h3>
        <p> this is a paragraph </p>

    </body>
</html>

https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements