text-align: center not working

Issue

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?

Solution

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/

Answered By – connexo

Answer Checked By – Mary Flores (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.