text-align: center not working

html css text-align

30,032

Solution 1

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/

Solution 2

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

Solution 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

30,032

Author by

Nedas Bolevičius

Updated on December 15, 2020

Comments

Nedas Bolevičius about 2 years

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?

Nedas Bolevičius about 6 years

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.
Saurav Rastogi about 6 years

@NedasBolevičius Correct! so, apply it on the #main h1, updated my answer.
j08691 about 6 years

"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.
Nedas Bolevičius about 6 years

Thanks! Your solution is correct but the other comment explained it better. Thank you for your help anyway!
connexo about 6 years

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 about 6 years

I also added additional information for you in some edits. I assume those will provide good use for you.
connexo about 6 years

Dude, check the comments. You're suggesting a solution that is still invalid HTML.
tvb over 2 years

This helped me.
Usman about 1 year

Spelling correction 'text-align: center'