text-align: center not working

Question

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?

... unless you set `h1 { display: inline-block; }` (which btw would also solve the text-centering issue). — connexo, Dec 14 '16 at 18:40
@connexo 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 `
` elements are block level by default. — j08691, Dec 14 '16 at 18:41
in addition to @j08691 words - http://stackoverflow.com/a/9852381/1499781 — Zoltan Toth, Dec 14 '16 at 18:43
@j08691 thank you very much! I actually never knew that somehow... I'd suggest posting that so I could mark it as correct. — Nedas Bolevičius, Dec 14 '16 at 18:45
@j08691 Is that even true if you set the `h1` to `inline` or `inline-block`? — connexo, Dec 14 '16 at 18:56
To be more precise, what is incorrect about the above code is the closing `` tag after the ``. `

TEST
` should be perfectly valid HTML since it is allowed to not explicitly close `
` tags. — connexo, Dec 14 '16 at 19:06

connexo · Accepted Answer · 2016-12-14T18:52:49.357

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/

I also added additional information for you in some edits. I assume those will provide good use for you. — connexo, Dec 14 '16 at 19:03

score 14 · Answer 2 · edited Jun 08 '22 at 11:47

14

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

edited Jun 08 '22 at 11:47

connexo

53,704
14
91
128

answered Dec 14 '16 at 18:46

Alexander Luna

5,261
4
30
36

1

This helped me. – tvb Jun 23 '20 at 17:48
1

Spelling correction 'text-align: center' – Usman Nov 15 '21 at 07:01
This worked for me. But why? – newguy Nov 30 '22 at 02:05
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' – reisy Dec 08 '22 at 08:39

score 3 · Answer 3 · answered Dec 14 '16 at 18:50

3

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

answered Dec 14 '16 at 18:50

j08691

204,283
31
260
272

Thanks! Your solution is correct but the other comment explained it better. Thank you for your help anyway! – Nedas Bolevičius Dec 14 '16 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. @j08691 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. – connexo Dec 14 '16 at 18:58

Saurav Rastogi · Answer 4 · 2016-12-14T18:57:58.090

0

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!

edited Dec 14 '16 at 18:57

answered Dec 14 '16 at 18:37

Saurav Rastogi

9,575
3
29
41

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. – Nedas Bolevičius Dec 14 '16 at 18:41
@NedasBolevičius Correct! so, apply it on the `#main h1`, updated my answer. – Saurav Rastogi Dec 14 '16 at 18:44
1

"Although you've used `
` inside of `
`, 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.
– j08691 Dec 14 '16 at 18:52

Razia sultana · Answer 5 · 2016-12-14T19:07:13.087

  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>

Dude, check the comments. You're suggesting a solution that is still **invalid HTML**. — connexo, Dec 14 '16 at 19:04

text-align: center not working

`

TEST

5 Answers5

` inside of `