heading tag won't work in alignment attribute

user_16281454 0
Viewed 29
<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 ?

html
3 Answers

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.

user_180153680

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>

user_111681760

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

user_119875940
Related