text-align: center not working

Question

text-align: center not working

41.6k views Asked by Nedas Bolevičius At 24 November 2024 at 13:28

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?

Original Q&A

There are 5 answers

Saurav Rastogi On 14 December 2016 at 18:37

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!

Alexander Luna On 14 December 2016 at 18:46

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

j08691 On 14 December 2016 at 18:50

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

Razia sultana On 14 December 2016 at 19:02

  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>

**connexo** · Accepted Answer · 2016-12-14 18:39:19

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/

TechQA.

text-align: center not working

There are 5 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in TEXT-ALIGN

Popular Questions

Popular Tags

Trending Questions