.center {
    margin: auto;
    width: 50%;
    border: 3px solid black;
    padding: 10px;
}

p6 {
    text-align: center;
}

Here is the line:

<br><p6>~~This text is centered~~</p6><br>

CodePudding user response：

HTML5 does not define a p6 element (it does define an h6 element). You might be using a custom element, but since you don't provide the code for that, and its tag name doesn't follow the naming convention for a custom element, your browser will treat p6 as an unknown element.

Now, you can still use this unknown element, but by default your browser will consider it to be an inline element. If you instruct your browser to render it as a block-level element, it will correctly center the text:

p6 {
  display: block;
  text-align: center;
}

<br><p6>~~This text is centered~~</p6><br>

CodePudding user response：

You just did a simple mistake there are h1,h2,h3 .. h6 tags in html there is no p tag with number associated Just replace p6 to p in html and css both and it should work

CodePudding user response：

Without CSS

This method may be a bit off topic on CSS, but it should help users who want to use something more simple.

(As Alexander said, <center> is deprecated so this is not suggested even though it still works)

You can used the HTML <center> element like so:

<br><center><p6>~~This text is centered~~</p6></center><br>

With CSS

If you want to use CSS, you can use the solution below: (Credit to @Robby Cornelissen)

p6 {
  display: block;
  text-align: center;
}

Also note that P6 doesn't exist, the author was trying to number his paragraphs. Have a great day!

CodePudding user response：

HTML doesn't have a p6 Element. There is only p (paragraph) or h1 to h6 (Heading sizes).

It can be rewritten as a class of CSS, hence by selector . you can now select the class and edit it as per your requirement.