text-align: center not working

Asked 14/12, 2016 at 18:36 Answered 14/12, 2016 at 19:2

I have tried searching for answers but nothing worked. I am trying to align a paragraph. I am pretty sure nothing is overwriting code in CSS. Here is the HTML and CSS:

body {
  background-image: url("../../images/pic01.jpg");
  background-repeat;
}
#main {
  background-color: rgb(255, 84, 0);
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: auto;
  overflow: auto;
  height: 100%;
  color: rgb(255, 255, 255);
}
#center {
  text-align: center;
}

<body id="top">
  <div id="main">
    <p id="center">
      <h1> TEST </h1> 
    </p>
  </div>
</body>

What is the mistake here?

Boisvert answered 14/12, 2016 at 18:36 Comment(7)

Your HTML is invalid. A <p> can't contain a <h1> – Affecting 14/12, 2016 at 18:39

... unless you set h1 { display: inline-block; } (which btw would also solve the text-centering issue). – Tawana 14/12, 2016 at 18:40

@Tawana No, the HTML is still invalid. Most browsers will attempt to correct the mistake by closing the paragraph before the heading, and then creating another paragraph after it. And <p> elements are block level by default. – Affecting 14/12, 2016 at 18:41

in addition to @Affecting words - https://mcmap.net/q/179464/-list-of-html5-elements-that-can-be-nested-inside-p-element – Brahear 14/12, 2016 at 18:43

@Affecting thank you very much! I actually never knew that somehow... I'd suggest posting that so I could mark it as correct. – Sheeran 14/12, 2016 at 18:45

@Affecting Is that even true if you set the h1 to inline or inline-block? – Tawana 14/12, 2016 at 18:56

To be more precise, what is incorrect about the above code is the closing </p> tag after the </h1>. <p id="center"> <h1> TEST </h1> should be perfectly valid HTML since it is allowed to not explicitly close <p> tags. – Tawana 14/12, 2016 at 19:6

text-align: center affects pure text nodes as well as child elements that have display: inline; or display: inline-block;. Your assumed child element is h1 which by default has display: block;. So even if it were allowed to have an h1 inside a p, this still wouldn't work (for example if you replaced the <p id="center"> by a <div id="center"> you'd still run into "non-working" centering).

p can only have so-called phrasing content, that is, only certain elements are allowed as child elements inside a paragraph.

Usage of any flow content elements (like e.g. h1) results in automated closing of the "surrounding" p tag. So this is what your browser really renders:

<div id="main">
    <p id="center"> </p>
    <h1> TEST </h1> 
</div>

One last thing, because you said that you're a beginner in frontend matters:

Do not use #id selectors in CSS. Always use CSS .classes instead. When you've progressed alot more, read about the why here: http://oli.jp/2011/ids/

Tawana answered 14/12, 2016 at 18:39 Comment(1)

I also added additional information for you in some edits. I assume those will provide good use for you. – Tawana 14/12, 2016 at 19:3

For the text-align: center to work you have to pass also the margin: auto option.

Chivalry answered 14/12, 2016 at 18:46 Comment(4)

This helped me. – Examinant 23/6, 2020 at 17:48

Spelling correction 'text-align: center' – Mycetozoan 15/11, 2021 at 7:1

This worked for me. But why? – Lancashire 30/11, 2022 at 2:5

this worked for me, but the problem is that I need the element to be on thr right side and , right now I hav 'margin-left: auto' but now it was overitten with the 'margin:auto' – Rashida 8/12, 2022 at 8:39

Your HTML is invalid. A <p> can't contain a <h1>. Most browsers will attempt to correct the mistake by closing the paragraph before the heading, and then creating another paragraph after it.

You can remove either the heading or the paragraph and use CSS to style as needed.

jsFiddle example

Affecting answered 14/12, 2016 at 18:50 Comment(2)

Thanks! Your solution is correct but the other comment explained it better. Thank you for your help anyway! – Sheeran 14/12, 2016 at 18:52

Upvoted because j08691 put me on the right track while I was already answering. I assume my answer is now more comprehensive and overall helpful, though. @Affecting Hope you weren't salty about me incorporating your hint into the answer I had already given. Hope you didn't downvote for that. If you did, please reconsider if it is really a bad answer and thus, worth downvoting. – Tawana 14/12, 2016 at 18:58

Give text-align: center to #main h1, like:

#main h1 {
  text-align: center;
}

Although you've used <h1> inside of <p>, which is an invalid HTML, and your browser handle it by closing the <p></p> before starting <h1>.

Have a look at the snippet below:

#main h1 {
  text-align: center;
}

body {
    background-image: url("../../images/pic01.jpg");
    background-repeat;
}

#main{
    background-color: rgb(255, 84, 0);
    width: 75%;

    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-top: auto;

    overflow:auto;
    height:100%;
    color: rgb(255, 255, 255);
}

#center {
    text-align: center;
}

<html>
    <head>
        <title>HTML PAMOKOS</title>
        <link rel="stylesheet" href="../assets/css/html.css" />
    </head>

    <body id="top">
        <div id="main">
            <p id="center"></p>
            <h1> TEST </h1>
        </div>
    </body>

</html>

Hope this helps!

Tiein answered 14/12, 2016 at 18:37 Comment(3)

But wouldn't that screw up the whole main div element? The main is literally the main one, which means that everything must be in there. It creates an element which is aligned horizontally to the center where I put all my paragraphs and other elements. – Sheeran 14/12, 2016 at 18:41

@NedasBolevičius Correct! so, apply it on the #main h1, updated my answer. – Tiein 14/12, 2016 at 18:44

"Although you've used <h1> inside of <p>, which is a bad practice, and your browser will not support it at all." It's not just bad practice -- it's invalid HTML, and most browsers will attempt to rectify that by closing the paragraph before the heading and creating another empty one after it. – Affecting 14/12, 2016 at 18:52

-1

  body {
        background-image: url("../../images/pic01.jpg");
        background-repeat;
    }

    #main{
        background-color: rgb(255, 84, 0);
        width: 75%;
    
        margin-left: auto;
        margin-right: auto;
        margin-bottom: auto;
        margin-top: auto;
    
        overflow:auto;
        height:100%;
        color: rgb(255, 255, 255);
    }
#center {
    text-align: center;
}
 

h1{
   text-align: center;
}

 <!DOCTYPE HTML>
    
    <html>
	    <head>
		    <title>HTML PAMOKOS</title>
	    	<link rel="stylesheet" href="../assets/css/html.css" />
	    </head>
    
	    <body id="top">
            <div id="main">
                <p id="center"> <h1> TEST </h1> </p>
            </div>
    	</body>
    
    </html>

Glooming answered 14/12, 2016 at 19:2 Comment(1)

Dude, check the comments. You're suggesting a solution that is still invalid HTML. – Tawana 14/12, 2016 at 19:4

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags