CODEWITHSUNDEEP
htmlcsstext-align
Nedas Bolevičius
Nedas Bolevičius

Reputation: 321

text-align: center not working

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?

Upvotes: 19

Views: 43857

Answers (5)

Alexander Luna
Alexander Luna

Reputation: 5449

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

Upvotes: 15

Razia sultana
Razia sultana

Reputation: 2211

  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>

Upvotes: -1

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

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!

Upvotes: 0

connexo
connexo

Reputation: 56754

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/

Upvotes: 22

j08691
j08691

Reputation: 207901

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

Upvotes: 3

Related Questions